/* ========================================================= FIXbrigade – Centrale app.css Theme switch: ========================================================= */ /* ========================================================= THEME VARIABLES ========================================================= */ :root { --color-primary: #0f766e; --color-secondary: #35a86b; --bg: #f3f5f7; --card-bg: #ffffff; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; --radius-lg: 16px; --radius-sm: 12px; --radius-pill: 999px; --shadow: 0 8px 22px rgba(15, 23, 42, 0.08); --shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.14); --page-width: 1320px; --dash-page-width: 1400px; } /* Productie */ body.theme-prod { --color-primary:#213a5a; --color-secondary: #3b82f6; } /* Testomgeving */ body.theme-test { --color-primary: #0f766e; --color-secondary: #35a86b; } /* Alternatief blauw */ body.theme-blue { --color-primary: #7c3aed; --color-secondary: #a855f7; } /* Backwards compatibility */ :root { --fb-blue: var(--color-primary); --fb-green: var(--color-secondary); } /* ========================================================= BASE ========================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Dash full-height support */ #react-entry-point, #_dash-app-content { height: 100%; } /* ========================================================= APP SHELL / SCROLL ========================================================= */ .app-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .page-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* ========================================================= TOPBAR ========================================================= */ .topbar { width: 100%; background: var(--color-primary); color: #fff; border-radius: 0 0 18px 18px; overflow: hidden; box-shadow: none !important; flex: 0 0 auto; z-index: 1000; } .topbar, .topbar * { border-bottom: none !important; } .topbar__inner { width: min(1200px, calc(100vw - 48px)); margin: 0 auto; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .brand__link { display: inline-flex; align-items: center; text-decoration: none; } .brand__logo { width: 36px; height: 36px; object-fit: contain; background: #fff; padding: 6px; border-radius: 10px; border: 1px solid rgba(15, 23, 42, 0.12); } .brand__title { margin: 0; color: #fff; font-size: 24px; font-weight: 900; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 auto; } .topbar__actions a, .topbar__home, .logout, .topbar__pill { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 18px; border-radius: var(--radius-pill); color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.38); text-decoration: none; font-size: 0.92rem; font-weight: 800; line-height: 1; white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease; } .topbar__actions a:hover, .topbar__home:hover, .logout:hover, .topbar__pill:hover { background: rgba(255, 255, 255, 0.26); color: #fff; transform: translateY(-1px); } .topbar__actions a:active, .topbar__home:active, .logout:active, .topbar__pill:active { transform: translateY(0); } /* Streamlit iframe topbar */ iframe[srcdoc*="FB_TOPBAR_MARKER"] { border-radius: 0 0 18px 18px !important; } /* ========================================================= PAGE LAYOUT ========================================================= */ .page, .dash-page { width: min(var(--page-width), calc(100vw - 48px)); margin: 26px auto 64px; text-align: left; } .dash-page { width: min(var(--dash-page-width), calc(100vw - 48px)); } .page__inner { width: 100%; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; text-align: left; } .page-header { margin-bottom: 18px; font-size: 25px; } .page-title { margin: 0 0 6px; font-size: 40px; font-weight: 900; letter-spacing: 0.2px; color: var(--color-primary); } .page-subtitle { margin: 0; color: var(--muted); font-size: 20px; font-weight: 850; } .section-title { margin: 0; font-size: 22px; font-weight: 850; color: var(--color-primary); } .section-subtitle { margin: 6px 0 0; color: var(--muted); font-size: 15px; } .dashboard-section { margin-bottom: 36px; } .dashboard-section--spaced { margin-top: 12px; } .section-header, .table-header, .card-header-row, .dash-section-header, .fixbrigades-table-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .section-header { margin-bottom: 20px; } .section-actions { display: flex; gap: 10px; align-items: center; } /* ========================================================= GENERAL CARDS Gebruik .card voor gewone Dash/Flask content containers ========================================================= */ .card, .filter-card, .data-card, .kpi-card, .metric-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .card { padding: 22px; margin-bottom: 20px; } .filter-card, .data-card { padding: 20px; margin-bottom: 20px; } .data-card { margin-top: 16px; } .kpi-card, .metric-card { padding: 18px 20px; } /* ========================================================= DASHBOARD CARDS Gebruik .dashboard-card voor klikbare tegels op dashboard.html ========================================================= */ .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 1280px; width: 100%; margin: 0 auto; } .dashboard-card { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: center; min-height: 122px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px 24px; color: inherit; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; } .dashboard-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .card__icon { width: 56px; height: 56px; object-fit: contain; margin: 0 auto; display: block; } .card__body { text-align: left; min-width: 0; } .card__title { margin: 0 0 4px; font-size: 18px; font-weight: 900; } .card__text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; } .card__cta { margin-top: 8px; color: var(--text); font-weight: 900; } /* ========================================================= FILTERS / FORMS ========================================================= */ .filters, .filter-grid { display: grid; gap: 16px; } .filters { grid-template-columns: repeat(2, minmax(240px, 1fr)); } .filter-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .filter-item label, .filter-card label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 750; color: var(--muted); } .dash-input { width: 100%; } .dash-input input, input.dash-input { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 8px 14px; background: #fff; } .dash-dropdown .Select-control, .Select-control { border-radius: var(--radius-sm); border: 1px solid var(--border); min-height: 42px; } /* Fixbrigades specifieke grid mag blijven, maar centraal */ .fixbrigades-filters-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 16px; align-items: end; } .fixbrigades-filters-grid label { display: block; margin-bottom: 6px; font-size: 0.82rem; font-weight: 700; color: #334155; } .fixbrigades-filters-grid .dash-input, .fixbrigades-filters-grid .Select-control { width: 100%; min-height: 42px; } .fixbrigades-filters-grid .dash-input { height: 42px; font-size: 0.95rem; } /* ========================================================= METRICS / KPI ========================================================= */ .metrics, .kpi-grid, .metric-grid { display: grid; gap: 18px; margin-bottom: 20px; } .metrics, .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .metric, .kpi-card, .metric-card { min-width: 0; } .metric-label, .kpi-label { font-size: 0.9rem; font-weight: 750; color: var(--muted); margin-bottom: 8px; } .metric-value, .kpi-value, .metric-value-main { font-size: 30px; line-height: 1; font-weight: 850; color: var(--color-primary); } .kpi-value { font-size: 22px; color: var(--text); } .metric-value-sub { margin-top: 6px; font-size: 13px; color: var(--muted); font-weight: 600; } /* ========================================================= BUTTONS ========================================================= */ .button, .btn { border: none; border-radius: var(--radius-pill); cursor: pointer; transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .button { padding: 10px 16px; font-weight: 750; background: var(--color-primary); color: #fff; } .btn { padding: 8px 14px; font-size: 13px; } .btn-primary, .button-primary { background: var(--color-primary); color: #fff; box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3); } .button:hover, .btn-primary:hover, .button-primary:hover { filter: brightness(1.05); transform: translateY(-1px); } .fixbrigades-download-btn { margin: 0; white-space: nowrap; } /* Streamlit button overrides */ button[kind="primary"], button[kind="secondary"], .stDownloadButton button { background: var(--color-primary) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; } button[kind="primary"]:hover, button[kind="secondary"]:hover, .stDownloadButton button:hover { filter: brightness(1.05); } /* ========================================================= TABS ========================================================= */ .dash-tabs { margin-top: 10px; } .dash-tabs .tab { padding: 10px 14px; font-size: 14px; border-radius: var(--radius-pill); margin-right: 8px; background: #f1f5f9; border: none; } .dash-tabs .tab--selected { background: var(--color-primary); color: #fff; font-weight: 700; } .tab-content { margin-top: 10px; } /* ========================================================= TABLES ========================================================= */ .table-header { margin-bottom: 14px; } .dash-table-container { border-radius: var(--radius-sm); overflow: hidden; } .dash-card .dash-table-container, .card .dash-table-container { margin-top: 12px; } /* ========================================================= REGIO INFO ========================================================= */ .regio-info { margin-top: -8px; } .regio-title { margin: 0 0 6px; font-size: 16px; color: var(--color-primary); } .regio-gemeenten { margin: 0; color: #475569; line-height: 1.5; } .regio-block + .regio-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .muted { color: var(--muted); } /* ========================================================= LOGIN ========================================================= */ /* Centering */ .login-page { height: 100vh; } .login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } /* Card */ .login-card { width: 100%; max-width: 460px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 32px; } /* Header */ .login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .login-brand-badge { width: 48px; height: 48px; border-radius: 14px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; font-size: 1.1rem; } .login-brand-text h1 { margin: 0; font-size: 1.45rem; line-height: 1.2; color: var(--text); } .login-brand-text p { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; } /* Form */ .form-row { margin-top: 16px; } .form-row label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 0.9rem; color: var(--muted); } .form-row input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; background: #fff; outline: none; } .form-row input:focus { border-color: #94a3b8; } /* Button */ .login-card button { width: 100%; margin-top: 20px; border: 0; border-radius: var(--radius-sm); padding: 12px; font-size: 14px; font-weight: 800; color: #fff; cursor: pointer; background: var(--color-primary); } .login-card button:hover { filter: brightness(1.05); } /* Error */ .error { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; font-size: 0.9rem; font-weight: 600; } /* Footer */ .footer-note { margin-top: 18px; color: var(--muted); font-size: 0.85rem; text-align: center; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fixbrigades-filters-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } .metrics, .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .topbar__inner { align-items: flex-start; } .brand__title { font-size: 20px; } .page-title { font-size: 32px; } .dashboard-card { grid-template-columns: 72px 1fr; } .card__icon { width: 48px; height: 48px; } .section-header, .table-header, .card-header-row, .dash-section-header, .fixbrigades-table-header { align-items: flex-start; flex-direction: column; } } @media (max-width: 700px) { .cards, .filters, .filter-grid, .metrics, .metric-grid, .kpi-grid, .fixbrigades-filters-grid { grid-template-columns: 1fr; } .topbar__inner, .page, .dash-page { width: calc(100vw - 28px); } .topbar__inner { flex-direction: column; gap: 12px; } .topbar__actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .brand__title { font-size: 18px; } .dashboard-card { grid-template-columns: 1fr; text-align: center; } .card__body { text-align: center; } } .section-header--stacked { display: block; margin-bottom: 20px; } .section-header--stacked .section-title { margin: 0 0 6px; } .section-header--stacked .section-subtitle { margin: 0; max-width: 760px; } .dashboard-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .dashboard-card .card__icon { width: 56px; height: 56px; object-fit: contain; margin: 0 auto; display: block; } .dashboard-card .card__body { text-align: left; min-width: 0; } .dashboard-card .card__title { margin: 0 0 4px; } .dashboard-card .card__text { margin: 0; } .dashboard-card .card__cta { margin-top: 8px; } .ai-intro-card { display: block; width: 100%; } .ai-question-card { display: block; } .ai-question-block { width: 100%; } .ai-question-block .section-title { margin-bottom: 10px; } .ai-textarea { width: 100%; min-height: 120px; resize: vertical; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-family: inherit; font-size: 15px; background: #fff; } .ai-button-row { display: flex; gap: 12px; align-items: center; margin-top: 18px; } .btn-secondary { background: #e2e8f0; color: var(--text); } .ai-output { width: 100%; } .ai-output-stack { display: flex; flex-direction: column; gap: 22px; } .ai-output-card { display: block; width: 100%; padding: 24px; overflow: hidden; } .ai-output-card .section-title { margin: 0 0 14px 0; } .ai-sql-block { display: block; width: 100%; max-width: 100%; margin: 0; padding: 18px; overflow-x: auto; white-space: pre; font-size: 14px; line-height: 1.55; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; } .ai-section-title-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .ai-result-count { color: #475569; font-size: 14px; } .ai-table-wrap { width: 100%; overflow-x: auto; } .ai-markdown-wrap ul { margin-top: 0; margin-bottom: 0; }