/* ============================================================
   IntakeTool – ONE CSS FILE FOR THE WHOLE TEAM
   Location: assets/css/style.css

   RULES:
   - DO NOT create separate CSS files
   - DO NOT use <style> tags in your PHP files
   - DO NOT use inline styles
   - If you need a new style, add it here and tell the team
   ============================================================ */


/* ── CSS Variables ───────────────────────────────────────────
   Change a variable here and it updates everywhere on the site
   ─────────────────────────────────────────────────────────── */
:root {
    --primary:        #4f8ef7;   /* Blue — buttons, links, active states */
    --primary-light:  #EFF6FF;   /* Light blue background */
    --bg:             #f0f2f5;   /* Page background */
    --white:          #ffffff;   /* White */
    --navbar:         #1a1f2e;   /* Dark navbar background */
    --text:           #1f2937;   /* Main text color */
    --muted:          #6c757d;   /* Grey/muted text */
    --border:         #dee2e6;   /* Card and input borders */
    --radius:         .75rem;    /* Border radius for cards */
    --shadow:         0 1px 4px rgba(0,0,0,.06); /* Card shadow */
}


/* ── Base / Body ─────────────────────────────────────────────
   Default styles applied to every page
   ─────────────────────────────────────────────────────────── */
html, body {
    height: 100%;
}

body {
    background: var(--bg);
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Pushes footer to bottom — add flex-grow-1 to your main container div */
.flex-grow-1 { flex: 1; }

footer { margin-top: auto; }


/* ── Navbar ──────────────────────────────────────────────────
   Top navigation bar — loaded by header.php on every page
   ─────────────────────────────────────────────────────────── */
.navbar-custom {
    background-color: var(--navbar) !important;
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .navbar-text {
    color: #ffffff !important;
}

/* Active nav link shows in blue */
.navbar-custom .nav-link.active {
    color: var(--primary) !important;
}

/* Logo icon color */
.navbar-brand i { color: var(--primary); }

/* Small role badge next to username */
.role-badge {
    padding: .3rem .75rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 600;
}


/* ── Cards ───────────────────────────────────────────────────
   Used everywhere for content sections
   ─────────────────────────────────────────────────────────── */
.card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: var(--white);
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 1rem 1.25rem;
    font-weight: 600;
}


/* ── Status Badges ───────────────────────────────────────────
   Small colored pill labels showing project status
   Used in project list, view page, and dashboard
   ─────────────────────────────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .85rem;
    border-radius: 2rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.badge-Intake,
.status-badge-Intake      { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }

.badge-InProgress,
.status-badge-InProgress  { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }

.badge-OnHold,
.status-badge-OnHold      { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }

.badge-Rejected,
.status-badge-Rejected    { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

.badge-Done,
.status-badge-Done        { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }


/* ── Status Change Buttons ───────────────────────────────────
   Pill-shaped buttons on the project view page to change status
   ─────────────────────────────────────────────────────────── */
.status-btn {
    padding: .35rem .9rem;
    border-radius: 2rem;
    font-size: .78rem;
    font-weight: 600;
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
}

.status-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Active state — matches the current project status */
.status-btn.active-Intake      { background: #EFF6FF; color: #2563EB; border-color: #BFDBFE; }
.status-btn.active-InProgress  { background: #F0FDF4; color: #16A34A; border-color: #BBF7D0; }
.status-btn.active-OnHold      { background: #FFFBEB; color: #D97706; border-color: #FDE68A; }
.status-btn.active-Rejected    { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.status-btn.active-Done        { background: #dcfce7; color: #15803d; border-color: #86efac; }


/* ── Info Rows ───────────────────────────────────────────────
   Label + value layout used in project view and detail pages
   ─────────────────────────────────────────────────────────── */
.info-row {
    display: flex;
    flex-direction: column;
    padding: .7rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.info-row:last-child { border-bottom: none; }

/* Small grey uppercase label like "PROJECT NAME" */
.info-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: .15rem;
}

/* The actual value below the label */
.info-value { font-size: .93rem; color: var(--text); }
.info-value.empty { color: #9ca3af; font-style: italic; }


/* ── Description Box ─────────────────────────────────────────
   Scrollable box for project description in view page
   Scrolls when text exceeds 300px height
   ─────────────────────────────────────────────────────────── */
.description-box {
    font-size: .93rem;
    color: #212529;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    line-height: 1.6;
    text-align: left;
}


/* ── Tables ──────────────────────────────────────────────────
   Used in projects list and dashboard
   ─────────────────────────────────────────────────────────── */
.table thead th {
    background: #f8f9fa;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
}

/* Highlight row on hover */
.table tbody tr:hover td { background: #f8fbff; }

/* Clickable row cursor */
.card .table tbody tr.item-row:hover td {
    background-color: #e6f0ff !important;
    cursor: pointer;
    transition: background 0.05s;
}

/* Auto column widths — browser sizes columns based on content */
.card .table { table-layout: auto; width: 100%; }

/* Keep # column narrow */
.card .table th:first-child,
.card .table td:first-child { width: 50px; }


/* ── Tabs ────────────────────────────────────────────────────
   Used on project view page (Details / Intake / Attachments / Log)
   ─────────────────────────────────────────────────────────── */
.nav-tabs .nav-link {
    font-weight: 600;
    font-size: .875rem;
    color: var(--muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: .75rem 1.1rem;
}

/* Active tab shows blue underline */
.nav-tabs .nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: none;
}

.nav-tabs .nav-link:hover { color: var(--text); }


/* ── Forms ───────────────────────────────────────────────────
   Input, select, textarea styles
   ─────────────────────────────────────────────────────────── */
.form-label { font-weight: 600; font-size: .875rem; }

/* Blue outline on focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(79,142,247,.15);
}


/* ── Buttons ─────────────────────────────────────────────────
   Override Bootstrap primary button color
   ─────────────────────────────────────────────────────────── */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: #3a7de6; border-color: #3a7de6; }


/* ── Filter Card ─────────────────────────────────────────────
   Search and filter bar on the projects list page
   ─────────────────────────────────────────────────────────── */
.filter-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}


/* ── Action Buttons ──────────────────────────────────────────
   Small square icon buttons in the project table (view/edit/delete)
   ─────────────────────────────────────────────────────────── */
.action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ── Assigned User ───────────────────────────────────────────
   Blue username text in project tables
   ─────────────────────────────────────────────────────────── */
.assigned-user {
    font-weight: 500;
    color: var(--primary);
}


/* ── Activity Log ────────────────────────────────────────────
   Log entries in the Activity Log tab of project view
   ─────────────────────────────────────────────────────────── */
.log-entry {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: .5rem;
    margin-bottom: 10px;
}

/* Round icon on the left of each log entry */
.log-icon {
    width: 32px;
    height: 32px;
    background: #e0ebff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}


/* ── SPIN Answers ────────────────────────────────────────────
   Used in the Intake Answers tab of project view
   ─────────────────────────────────────────────────────────── */

/* Phase heading like "SITUATIE" */
.spin-phase-head {
    font-size: .8rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .75rem;
}

/* Each question + answer box */
.spin-row {
    padding: .75rem 1rem;
    background: #f9fafb;
    border-radius: .4rem;
    border-left: 3px solid #BFDBFE;
    margin-bottom: .75rem;
}

/* Question text */
.spin-q { font-size: .8rem; color: var(--muted); margin-bottom: .25rem; }

/* Answer text */
.spin-a { font-size: .9rem; color: var(--text); font-weight: 500; }


/* ── Role Badges ─────────────────────────────────────────────
   Colored pill showing user role in Users page
   ─────────────────────────────────────────────────────────── */
.role-Admin      { background: #dbeafe; color: #1d4ed8; }
.role-Editor     { background: #d1fae5; color: #065f46; }
.role-Medewerker { background: #e5e7eb; color: #374151; }


/* ── Section Title ───────────────────────────────────────────
   Small uppercase heading used above form sections
   ─────────────────────────────────────────────────────────── */
.section-title {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #e9ecef;
}

/* Inline section badge with icon */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 1rem;
}


/* ── Toast Notification ──────────────────────────────────────
   Fixed bottom-right popup for success messages
   ─────────────────────────────────────────────────────────── */
.toast-msg,
.toast-fixed {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    animation: fadeUp .3s ease;
}


/* ── Intake Step Indicator ───────────────────────────────────
   Progress steps bar used in intake and create project pages
   ─────────────────────────────────────────────────────────── */
.step-indicator { display: flex; gap: 0; margin-bottom: 2rem; }

.step {
    flex: 1;
    text-align: center;
    padding: .6rem;
    font-size: .8rem;
    font-weight: 600;
    background: #e9ecef;
    color: var(--muted);
}

.step.active { background: var(--primary); color: #fff; }
.step.done   { background: #d1fae5; color: #065f46; }
.step:first-child { border-radius: .5rem 0 0 .5rem; }
.step:last-child  { border-radius: 0 .5rem .5rem 0; }


/* ── Create Project Wizard ───────────────────────────────────
   2-step card used in projects/create.php
   ─────────────────────────────────────────────────────────── */
.wizard-card {
    background: var(--white);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.wizard-header {
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.wizard-header h5 { margin: 0; font-weight: 700; font-size: 1.1rem; }
.wizard-body { padding: 1.75rem; }

/* Step circle indicators */
.sp-item { flex: 1; display: flex; flex-direction: column; align-items: center; }

.sp-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}

.sp-circle.done    { background: var(--primary); color: #fff; }
.sp-circle.active  { background: var(--primary); color: #fff; border: 3px solid #bfdbfe; }
.sp-circle.pending { background: #e9ecef; color: #9ca3af; }

.sp-label { font-size: .72rem; font-weight: 600; margin-top: 5px; }
.sp-label.done, .sp-label.active { color: var(--primary); }
.sp-label.pending { color: #9ca3af; }

/* Line between step circles */
.sp-line { flex: 1; height: 2px; margin-top: -20px; }
.sp-line.done    { background: var(--primary); }
.sp-line.pending { background: #e9ecef; }


/* ── Intake Start Card ───────────────────────────────────────
   Card used in intake/start.php to pick a project
   ─────────────────────────────────────────────────────────── */
.intake-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
}


/* ── Intake Complete Icon ────────────────────────────────────
   Big green checkmark circle on intake/complete.php
   ─────────────────────────────────────────────────────────── */
.success-icon {
    width: 80px; height: 80px;
    background: #d1fae5;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    color: #059669;
    margin: 0 auto 1.5rem;
}


/* ── Dashboard Project Card ──────────────────────────────────
   Clickable project cards on the standalone dashboard.php
   ─────────────────────────────────────────────────────────── */
.project-card {
    cursor: pointer;
    transition: border-color .2s;
    border: 1.5px solid #dee2e6;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    margin-bottom: .75rem;
}

.project-card:hover  { border-color: var(--primary); }
.project-card.active { border-color: var(--primary); background: #f0f6ff; }

/* Sticky detail panel on the right side of dashboard */
.detail-panel {
    background: #fff;
    border-radius: .75rem;
    border: 1.5px solid #dee2e6;
    padding: 1.5rem;
    position: sticky;
    top: 20px;
}


/* ── PDF Viewer ──────────────────────────────────────────────
   Used in view.php and questions.php for PDF.js canvas viewer
   ─────────────────────────────────────────────────────────── */
#pdfCanvas,
#intakePdfCanvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.pdf-controls {
    background: #333;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.pdf-controls button {
    background: #555;
    color: white;
    border: none;
    padding: 4px 14px;
    border-radius: 4px;
    cursor: pointer;
}

.pdf-controls button:hover { background: #777; }
.pdf-controls span { color: white; font-size: .85rem; }


/* ── Login / Register Page ───────────────────────────────────
   Used by auth/login.php and auth/register.php
   ─────────────────────────────────────────────────────────── */
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Form card */
.form-container form {
    background: #ecf0f1;
    padding: 30px;
    border-radius: 10px;
    width: 420px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.form-container input {
    margin-bottom: 10px;
    padding: 10px;
}

/* Submit button */
.form-container button {
    padding: 10px;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
}

.form-container button:hover { background: #3a7de6; }

/* Links below the form */
.login-link,
.register-link { font-size: 14px; }

.login-link a,
.register-link a { color: var(--primary); text-decoration: none; }

.login-link a:hover,
.register-link a:hover { text-decoration: underline; }


/* ── Animations ──────────────────────────────────────────────
   Used for toast notifications fading in
   ─────────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}