/* ===================================================================
   meeting-redesign.css
   Load AFTER style.css:
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="meeting-redesign.css">
   Overrides only - the existing markup is unchanged apart from three
   small additions (chart div, script tag, renderHoursChart call).
   =================================================================== */

:root {
    --jr-navy:   #22344d;
    --jr-blue:   #2f80ed;
    --jr-green:  #21a366;
    --jr-red:    #e8453c;
    --jr-amber:  #d9a400;
    --jr-border: #e3e8ef;
    --jr-muted:  #6b7785;
    --jr-soft:   #f7f9fb;
    --jr-text:   #2b3440;
}

/* Fixes the "page wider than the screen" problem: padding and borders
   now count inside declared widths, scoped to this page only. */
.meeting-layout-fluid,
.meeting-layout-fluid *,
.meeting-layout-fluid *::before,
.meeting-layout-fluid *::after { box-sizing: border-box; }

body {
    background: #fff;
    color: var(--jr-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
    margin: 0;
}

/* ---------------- Navbar ---------------- */
.navbar { background: var(--jr-navy); }
.navbar-content-fluid {
    display: flex; align-items: center; justify-content: space-between;
    max-width: none; padding: 12px 20px; gap: 16px;
}
.navbar h1 { margin: 0; font-size: 16px; font-weight: 600; color: #fff; }
.navbar-right { display: flex; align-items: center; gap: 14px; color: #cfd8e3; font-size: 13px; }
.navbar-right .btn-secondary { background: #4a5b70; }

/* ---------------- Page frame ---------------- */
.meeting-layout-fluid {
    display: flex; align-items: flex-start; gap: 16px;
    max-width: none; padding: 16px; margin: 0;
}
.meeting-sidebar { flex: 0 0 232px; display: flex; flex-direction: column; gap: 14px; }
/* min-width:0 stops wide tables stretching the whole page */
.meeting-content { flex: 1 1 auto; min-width: 0; display: grid; gap: 14px; }

/* ---------------- Cards ---------------- */
.sidebar-section,
.job-selection,
.job-header,
.notes-section,
.all-notes-section {
    background: #fff;
    border: 1px solid var(--jr-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.sidebar-section { padding: 14px; }
.sidebar-section h3,
.notes-section h3,
.all-notes-section h3 {
    margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--jr-navy);
}

/* ---------------- Buttons ---------------- */
.btn {
    display: inline-block; border: 0; border-radius: 6px;
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    line-height: 1.2; cursor: pointer; text-decoration: none; text-align: center;
}
.btn-primary   { background: var(--jr-blue);  color: #fff; }
.btn-secondary { background: #5b6b7f;         color: #fff; }
.btn-success   { background: var(--jr-green); color: #fff; }
.btn-danger    { background: var(--jr-red);   color: #fff; }
.btn-block     { display: block; width: 100%; }
.btn-link      { background: none; border: 0; padding: 0; color: var(--jr-blue);
                 font-size: 12px; cursor: pointer; text-decoration: underline; }

/* ---------------- Meeting status ---------------- */
.status-indicator {
    display: block; text-align: center; padding: 8px; border-radius: 6px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.status-active      { background: #e6f6ec; color: #1a7f4b; }
.status-not_started { background: #f1f3f6; color: var(--jr-muted); }
.status-stopped     { background: #fdecea; color: #a3271f; }

/* ---------------- Participants ---------------- */
#participantsList { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.participant-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--jr-border); border-radius: 6px; font-size: 13px;
}
.participant-item.ready { border-color: #bfe6cf; background: #f4fbf7; }
.ready-icon { color: #98a2b3; }
.participant-item.ready .ready-icon { color: var(--jr-green); }
.badge-small {
    margin-left: auto; background: var(--jr-blue); color: #fff;
    border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600;
}

/* ---------------- Job selection bar ---------------- */
.job-selection {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 18px; padding: 12px 16px;
}
.job-selection h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--jr-navy); white-space: nowrap; }
.job-selection-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.job-selection-controls .form-group { margin: 0; display: flex; align-items: center; gap: 8px; }
.job-selection-controls label { margin: 0; font-size: 13px; color: #41505f; white-space: nowrap; }
.job-selection-controls input[type="checkbox"] { margin: 0; }
.form-control {
    border: 1px solid #cfd6e0; border-radius: 6px;
    padding: 7px 10px; font-size: 13px; background: #fff; color: var(--jr-text);
}
#sectorFilter { width: auto; min-width: 118px; }
#jobSelect { flex: 1 1 300px; margin-left: auto; min-width: 260px; }

/* ---------------- Job details grid ----------------
   Row 1: job header full width
   Row 2/3 col 1: Your Notes, All Participant Notes
   Row 2 col 2:   Action Points (spans both rows)
   nth-child keeps this working without editing the HTML; the
   #actionPointsSection rule takes over if you add that id.        */
#jobDetailsSection {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    grid-auto-rows: min-content;
    gap: 14px; align-items: start;
}
#jobDetailsSection > div:nth-child(1) { grid-column: 1 / -1; }
#jobDetailsSection > div:nth-child(2) { grid-column: 1; grid-row: 2; }
#jobDetailsSection > div:nth-child(3) { grid-column: 1; grid-row: 3; }
#jobDetailsSection > div:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; }
#actionPointsSection { grid-column: 2; grid-row: 2 / span 2; }

/* ---------------- Job header ---------------- */
.job-header { padding: 16px; }
.job-header-content { display: flex; gap: 22px; align-items: flex-start; }
.job-info { flex: 1 1 auto; min-width: 0; }
.job-info h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--jr-navy); }
.job-info p { margin: 2px 0; font-size: 13px; }
.job-info hr { border: 0; border-top: 1px solid var(--jr-border); margin: 10px 0; }
.text-muted { color: var(--jr-muted); }
.job-image-container { flex: 0 0 430px; max-width: 430px; }
.job-image { max-width: 100%; }

.tables-side-by-side { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }

/* Dates table - borderless label/value pairs */
.table-bordered { border-collapse: collapse; font-size: 12.5px; }
.table-bordered td { border: 0; padding: 3px 12px 3px 0; }

/* Hours table */
#hoursTable { border-collapse: collapse; font-size: 12px; }
#hoursTable th, #hoursTable td {
    border: 1px solid var(--jr-border); padding: 6px 8px; text-align: center; white-space: nowrap;
}
#hoursTable th { background: #f8f9fa; font-weight: 700; color: #41505f; }
#hoursTable td:first-child, #hoursTable th:first-child { text-align: left; font-weight: 600; }

/* Progress bar */
#hoursProgressWrap { margin-top: 14px; }
.progress { background: #eef1f5; border: 1px solid #dfe4ea !important; border-radius: 4px; overflow: hidden; }
.progress-bar { background: var(--jr-blue); height: 14px !important; }
.progress-bar.over, .progress-bar.progress-over { background: var(--jr-red); }

/* ---------------- On/Off history ---------------- */
.onoff-cell { text-align: center; padding: 5px 0; font-size: 13px; }
.tooltip-wrapper { position: relative; display: inline-block; }
.tooltip-box {
    display: none; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
    background: var(--jr-navy); color: #fff; padding: 7px 9px; border-radius: 5px;
    font-size: 12px; width: 230px; z-index: 50; text-align: left; white-space: normal;
    box-shadow: 0 4px 10px rgba(16, 24, 40, .18);
}
.tooltip-wrapper:hover .tooltip-box { display: block; }

/* ---------------- Notes & action points ---------------- */
.notes-section, .all-notes-section { padding: 14px 16px; }
.notes-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ready-status { margin-top: 10px; }

.note-item {
    border-left: 3px solid var(--jr-blue); background: var(--jr-soft);
    border-radius: 4px; padding: 10px 12px; margin-bottom: 10px;
}
.note-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.note-header strong { font-size: 13px; color: var(--jr-navy); }
.note-time { font-size: 11px; color: var(--jr-muted); white-space: nowrap; }
.note-content { font-size: 13px; color: #3c4655; white-space: pre-wrap; }
.action-point-actions { margin-top: 8px; }
/* Completed action points keep their treatment now they render as .note-item */
.note-item.completed { border-left-color: #98a2b3; }
.note-item.completed .note-content { text-decoration: line-through; color: #98a2b3; }
.text-success { color: var(--jr-green); font-size: 12px; font-weight: 600; }

/* ---------------- Alerts ---------------- */
.alert { padding: 9px 11px; border-radius: 6px; font-size: 12.5px; }
.alert-success { background: #e6f6ec; color: #1a7f4b; }
.alert-danger  { background: #fdecea; color: #a3271f; }
.alert-warning { background: #fff8e1; color: #8a6d00; }

/* ---------------- Modals ----------------
   display is toggled inline by the JS - deliberately not set here. */
.modal { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 1000; }
.modal-content {
    position: relative; background: #fff; border-radius: 10px;
    margin: 7vh auto; padding: 22px; width: min(560px, 92vw);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
}
.modal-content h3 { margin: 0 0 14px; font-size: 16px; color: var(--jr-navy); }
.modal-content .form-group { margin-bottom: 14px; }
.modal-content label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: #41505f; }
.modal-content .form-control { width: 100%; }
.close { position: absolute; top: 10px; right: 14px; font-size: 22px; color: #98a2b3; cursor: pointer; line-height: 1; }

/* ---------------- Hours chart ---------------- */
.jr-chart { font-size: 11px; color: var(--jr-muted); }
.jr-chart-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 5px; }
.jr-chart-label { text-align: right; font-size: 11px; color: #41505f; }
.jr-chart-bars {
    position: relative; padding: 2px 0;
    background-image: repeating-linear-gradient(to right, var(--jr-border) 0 1px, transparent 1px 20%);
}
.jr-bar { height: 7px; border-radius: 1px; margin: 2px 0; min-width: 0; }
.jr-bar-actual { background: #e8743b; }
.jr-bar-est    { background: #1f4e79; }
.jr-chart-axis {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px;
    border-top: 1px solid var(--jr-border); padding-top: 4px; margin-top: 2px;
}
.jr-chart-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--jr-muted); }
.jr-chart-legend { display: flex; justify-content: center; gap: 16px; margin-top: 8px; font-size: 11px; }
.jr-chart-key { display: inline-flex; align-items: center; gap: 5px; }
.jr-chart-swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.jr-chart-empty { padding: 20px 0; text-align: center; font-size: 12px; color: var(--jr-muted); }

/* ---------------- Narrow screens ---------------- */
@media (max-width: 1200px) {
    #jobDetailsSection { grid-template-columns: minmax(0, 1fr); }
    #jobDetailsSection > div:nth-child(1),
    #jobDetailsSection > div:nth-child(2),
    #jobDetailsSection > div:nth-child(3),
    #jobDetailsSection > div:nth-child(4),
    #actionPointsSection { grid-column: 1; grid-row: auto; }
    .job-header-content { flex-direction: column; }
    .job-image-container { flex: 1 1 auto; max-width: 100%; width: 100%; }
}

/* ---------------- Sidebar logo card ---------------- */
.jr-logo-card { padding: 10px; text-align: center; }
.jr-logo-card img { max-width: 100%; height: auto; display: inline-block; }