/* ============================
   PMADB (Consolidated Styles)
   Scope: only the app page
   Wrap your page content in a .pmadb-page element
   ============================ */

/* ---------- OPTIONAL: FULL-WIDTH MODE (choose ONE mode) ---------- */
/* Use this if you want the app to fill the viewport.
   If you prefer contained inside site width, skip this block. */
.pmadb-page .site-header,
.pmadb-page .site-footer { display: none !important; }

.pmadb-page .site-content,
.pmadb-page .inside-article {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
}

.pmadb-page .site-content {
  display: block !important; /* don’t force flex; let our app control layout */
  min-height: 100vh;
  background: transparent;
}

/* ---------- OPTIONAL: CONTAINED MODE (choose ONE mode) ---------- */
/* Uncomment this block AND remove the FULL-WIDTH MODE above
   to keep the app inside your theme’s normal content width. */
/*
.pmadb-page .site-header,
.pmadb-page .site-footer { display: block !important; }

.pmadb-page .site-content,
.pmadb-page .inside-article {
  max-width: var(--gp-content-width, 1200px);
  margin: 0 auto !important;
  padding: 2rem !important;
}

.pmadb-page .site-content { display: block !important; }
*/

/* ---------- Background video & overlay (optional) ---------- */
.pmadb-video-bg video {
  position: fixed; inset: 0; min-width: 100%; min-height: 100%;
  width: auto; height: auto; object-fit: cover;
  transform: none; top: 0; left: 0; z-index: -2;
}
.pmadb-overlay {
  position: fixed; inset: 0;
  background: rgba(173, 216, 230, 0.5);
  z-index: -1;
}

/* ---------- Login ---------- */
.pmadb-login-wrapper {
  position: relative; z-index: 1;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.pmadb-login-container {
  background: rgba(255,255,255,0.95);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 2rem; max-width: 400px; width: 100%; text-align: center; box-sizing: border-box;
}
.pmadb-card {
  /* If you rely on PHP inline styles this is a safe default */
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: saturate(140%) blur(6px);
}
.pmadb-logo { max-width: 150px; margin: 0 auto 1.5rem; display: block; }
.pmadb-login-container h2 { margin-bottom: .5rem; font-size: 1.75rem; color: #333; }
.pmadb-subtitle { margin-bottom: 1.5rem; color: #555; }
.pmadb-login-container input {
  width: 100%; padding: .75rem 1rem; margin-bottom: 1rem;
  border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}
.pmadb-btn {
  width: 100%; padding: .75rem; border-radius: 4px; font-size: 1rem; cursor: pointer;
  box-sizing: border-box; margin-bottom: .75rem;
}
.pmadb-btn-primary { background: #0073e6; color: #fff; border: none; }
.pmadb-btn-primary:hover { background: #005bb5; }
.pmadb-btn-secondary { background: transparent; color: #0073e6; border: 2px solid #0073e6; }
.pmadb-btn-secondary:hover { background: rgba(0,115,230,0.1); }
.pmadb-help a { color: #000; text-decoration: underline; font-size: .875rem; }

/* ---------- App Shell ---------- */
.pmadb-app {
  /* default: flexible layout with a fixed sidebar */
  --pmadb-sidebar: 200px;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

/* Sidebar (fixed width) */
.pmadb-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--pmadb-sidebar);
  height: 100%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding-top: 2rem;
  box-sizing: border-box;
}
.pmadb-sidebar ul { list-style: none; margin: 0; padding: 0; }
.pmadb-sidebar li { margin: 1rem 0; text-align: center; }
.pmadb-sidebar a {
  text-decoration: none; color: #333; font-size: 1.1rem;
}
.pmadb-sidebar li.active a, .pmadb-sidebar li a:hover { color: #0073e6; font-weight: bold; }

/* Main content area (accounts for fixed sidebar) */
.pmadb-content {
  margin-left: var(--pmadb-sidebar);
  width: calc(100% - var(--pmadb-sidebar));
  padding: 2rem;
  overflow-y: auto;
  box-sizing: border-box;
  min-width: 0; /* allow grid/long titles to shrink without overflow */
}

/* ---------- Tables ---------- */
.pmadb-dashboard { width: 100%; margin: 0; padding: 2rem 0; box-sizing: border-box; }
.pmadb-table-wrap { overflow-x: auto; margin-top: 1rem; }
.pmadb-records-table,
.pmadb-detail-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.pmadb-records-table th, .pmadb-records-table td,
.pmadb-detail-table th, .pmadb-detail-table td {
  padding: .5rem; border: 1px solid #eee; text-align: left;
}
.pmadb-records-table th { background: #f9f9f9; position: sticky; top: 0; z-index: 1; }
.pmadb-back-link { display: inline-block; margin-bottom: 1rem; color: #0073e6; text-decoration: none; }
.pmadb-back-link:hover { text-decoration: underline; }
.pmadb-detail-table th { width: 20%; background: #f5f5f5; vertical-align: top; }
.pmadb-detail-table td { border-bottom: 1px solid #eee; white-space: pre-wrap; }

/* Summary/list view: smaller, tighter rows only for the overview table */
#pmadb-table-jobs th,
#pmadb-table-jobs td {
  font-size: 0.875rem; /* 14px */
  line-height: 1.3;
  padding: 8px 10px;
}

.pmadb-table-search { font-size: 0.875rem; }

/* ---------- Detail Layout ---------- */
.pmadb-detail-grid {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.pmadb-detail-col {
  background: #fff;
  padding: 1rem;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ---------- Header / Subnav / Actions ---------- */
.pmadb-project-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; /* left grows/shrinks, right content-sized */
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
}
.pmadb-project-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pmadb-job-id { font-weight: bold; margin-bottom: .25rem; color: #475569; }
.pmadb-project-header h2 { margin: 0; font-size: 1.5rem; }

/* Subnav chips */
.pmadb-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.pmadb-subnav a {
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  text-decoration: none;
  background: #f3f4f6;
  color: #111;
}
.pmadb-subnav a.is-active {
  background: #111827;
  color: #fff;
}

/* Actions on the right */
.pmadb-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-self: end; /* keep to right in header grid */
}
.pmadb-edit-btn {
  background: #0073e6; color: #fff; border: none;
  padding: .5rem 1rem; border-radius: 4px; cursor: pointer;
}
.pmadb-edit-btn:hover { background: #005bb5; }

/* Reusable section card for non-dashboard tabs */
.pmadb-section {
  background: var(--glass, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 16px;
}

/* ---------- Activity ---------- */
.pmadb-activity-form input,
.pmadb-activity-form textarea {
  width: 100%; padding: .5rem; margin-bottom: .75rem;
  border: 1px solid #ccc; border-radius: 4px;
}
.pmadb-activity-form button {
  background: #0073e6; color: #fff; border: none;
  padding: .5rem 1rem; border-radius: 4px; cursor: pointer;
}
.pmadb-activity-form button:hover { background: #005bb5; }
.pmadb-activity-item {
  border-bottom: 1px solid #eee; padding: .5rem 0; margin-bottom: .5rem;
}
.pmadb-activity-item h4 { margin: .25rem 0; font-size: 1rem; }

/* ---------- Modal ---------- */
.pmadb-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 1000;
}
.pmadb-modal-content {
  background: #fff; padding: 1.5rem; border-radius: 4px;
  max-width: 500px; margin: 5% auto; position: relative;
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .pmadb-app { --pmadb-sidebar: 180px; }
  .pmadb-sidebar { width: var(--pmadb-sidebar); }
  .pmadb-content {
    margin-left: var(--pmadb-sidebar);
    width: calc(100% - var(--pmadb-sidebar));
    padding: 1.25rem;
  }
  .pmadb-detail-grid { grid-template-columns: 1fr; }
  .pmadb-project-header h2 { font-size: 1.25rem; }
}

/* Fixed sidebar mode (then keep your original content offsets) */
.pmadb-sidebar { position: fixed; inset: 0 auto 0 0; width: 200px; height: 100%; }
.pmadb-content { margin-left: 200px; width: calc(100% - 200px); }

/* Use sticky/in-flow sidebar: let content take the rest of the row */
.pmadb-sidebar {
  position: sticky;      /* matches your template markup */
  top: 16px;
  height: fit-content;
  width: var(--pmadb-sidebar, 200px);
}

.pmadb-content {
  margin-left: 0;        /* stop subtracting the sidebar again */
  width: auto;           /* allow natural width */
  flex: 1 1 auto;        /* fill remaining space beside the sidebar */
  min-width: 0;          /* prevent overflow with long titles/tabs */
}
/* Compact project summary (detail view) */
.pmadb-detail-table th,
.pmadb-detail-table td {
  font-size: 0.875rem;   /* 14px */
  line-height: 1.35;
}


/* Detail summary: value cells left-aligned with a soft indent */
.pmadb-detail-table td {
  text-align: left !important;
  padding-left: 12px;            /* tweak to taste */
  vertical-align: top;
}



/* GANTT CHART */

/* ===== Gantt ===== */
.pmadb-gantt { overflow:auto; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.pmadb-gantt-toolbar {
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid #e5e7eb; background:#f9fafb; position:sticky; top:0; z-index:2;
}
.pmadb-gantt-toolbar .left, .pmadb-gantt-toolbar .right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pmadb-gantt-btn { padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; font-size:13px; }
.pmadb-gantt-btn[disabled] { opacity:.6; cursor:default; }
.pmadb-gantt-select { padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; font-size:13px; }

.pmadb-gantt-wrap { display:flex; min-width:720px; }
.pmadb-gantt-sidebar {
  flex:0 0 260px; border-right:1px solid #e5e7eb; background:#fcfcfc;
}
.pmadb-gantt-sidebar .row {
  display:flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-bottom:1px solid #f3f4f6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px;
}
.pmadb-gantt-sidebar .row.phase { font-weight:600; background:#f6f7fb; }

.pmadb-gantt-main { position:relative; flex:1 1 auto; }

.pmadb-gantt-header {
  position:sticky; top:45px; /* below toolbar */
  z-index:1; background:#fff; border-bottom:1px solid #e5e7eb;
}
.pmadb-gantt-months, .pmadb-gantt-days {
  display:grid; grid-auto-rows:28px; align-items:center; font-size:12px; color:#475569;
}
.pmadb-gantt-days .cell {
  display:flex; align-items:center; justify-content:center; border-left:1px solid #f1f5f9; height:28px;
}
.pmadb-gantt-days .cell.weekend { background:#fafafa; color:#64748b; }

.pmadb-gantt-grid {
  position:relative;
  display:grid;
  grid-auto-rows:32px; /* row height */
}
.pmadb-gantt-grid .vline {
  border-left:1px solid #f7f7f7;
}
.pmadb-gantt-grid .weekend {
  background: #fafafa;
}

.pmadb-gantt-bar {
  height:16px; border-radius:8px; align-self:center;
  background:#93c5fd; /* default */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.pmadb-gantt-bar[data-status="Complete"]       { background:#86efac; }
.pmadb-gantt-bar[data-status="In Progress"]    { background:#60a5fa; }
.pmadb-gantt-bar[data-status="Blocked"]        { background:#fca5a5; }
.pmadb-gantt-bar[data-status="Proposal Sent"]  { background:#fde68a; }

.pmadb-gantt-today {
  position:absolute; top:0; bottom:0; width:2px; background:#ef4444; opacity:.8; pointer-events:none;
}


/* Gantt toolbar buttons: readable by default */
.pmadb-gantt-btn {
  color: #111;                 /* ensure visible on white */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.pmadb-gantt-btn:hover {
  background: #111827;
  color: #fff;
}
.pmadb-gantt-btn[disabled] {
  opacity: .6;
  cursor: default;
}

/* Sidebar rows: add a tiny delete button */
.pmadb-gantt-sidebar .row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
  overflow: hidden;
}
.pmadb-gantt-sidebar .row .name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmadb-gantt-del {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: .5;
}
.pmadb-gantt-sidebar .row:hover .pmadb-gantt-del {
  opacity: 1;
}


/* Gantt toolbar buttons readable + hover */
.pmadb-gantt-btn {
  color:#111; background:#fff; border:1px solid #e5e7eb;
  border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px;
}
.pmadb-gantt-btn:hover { background:#111827; color:#fff; }
.pmadb-gantt-btn[disabled] { opacity:.6; cursor:default; }

/* Save button highlight when dirty */
.pmadb-gantt-save.is-dirty {
  background:#16a34a; border-color:#16a34a; color:#fff;
}

/* Dirty badge */
.pmadb-gantt-dirty {
  font-size:12px; color:#b91c1c; background:#fee2e2;
  border:1px solid #fecaca; padding:3px 8px; border-radius:999px;
}

/* Sidebar rows + controls */
.pmadb-gantt-sidebar .row { display:flex; align-items:center; gap:6px; }
.pmadb-gantt-name { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.pmadb-gantt-del,
.pmadb-gantt-move {
  flex:0 0 auto; border:0; background:transparent; cursor:pointer; opacity:.5;
  font-size:14px; line-height:1; padding:0 4px;
}
.pmadb-gantt-sidebar .row:hover .pmadb-gantt-del,
.pmadb-gantt-sidebar .row:hover .pmadb-gantt-move { opacity:1; }
.pmadb-gantt-move[disabled] { opacity:.25; cursor:default; }




/* BUDGETTING TAB */

/* ===== Budget ===== */
.pmadb-budget { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.pmadb-budget-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:1px solid #e5e7eb; background:#f9fafb;
}
.pmadb-budget-toolbar .left, .pmadb-budget-toolbar .right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.pmadb-budget-btn{
  color:#111; background:#fff; border:1px solid #e5e7eb;
  border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px;
}
.pmadb-budget-btn:hover{ background:#111827; color:#fff; }
.pmadb-budget-btn[disabled]{ opacity:.6; cursor:default; }
.pmadb-budget-save.is-dirty{ background:#16a34a; border-color:#16a34a; color:#fff; }

.pmadb-budget-dirty{
  font-size:12px; color:#b91c1c; background:#fee2e2;
  border:1px solid #fecaca; padding:3px 8px; border-radius:999px;
}

.pmadb-budget .pmadb-table-wrap{ overflow:auto; }
.pmadb-budget-table{
  width:1200px; /* wide grid; scrolls horizontally if container is smaller */
  border-collapse:collapse; font-size:14px;
}
.pmadb-budget-table th, .pmadb-budget-table td{
  border-bottom:1px solid #eef2f7; padding:8px 10px; vertical-align:middle; white-space:nowrap;
}
.pmadb-budget-table thead th{ position:sticky; top:0; background:#f8fafc; z-index:1; }
.pmadb-budget-table th.group{ background:#f3f4f6; text-transform:uppercase; font-size:12px; letter-spacing:.02em; }

/* editables */
.pmadb-edit{
  width: 100%; min-width: 80px; max-width: 220px; box-sizing: border-box;
  border:1px solid #e5e7eb; border-radius:6px; padding:6px 8px; font-size:13px; background:#fff;
}
.pmadb-edit.num{ text-align:right; }
.pmadb-edit:focus{ outline:none; border-color:#94a3b8; box-shadow:0 0 0 2px #e2e8f0; }
.pmadb-cell-total{ text-align:right; font-variant-numeric: tabular-nums; }
.pmadb-cell-profit{ text-align:right; font-variant-numeric: tabular-nums; font-weight:600; }

.pmadb-row-actions{ display:flex; gap:6px; }
.pmadb-row-btn{
  border:0; background:transparent; cursor:pointer; padding:0 4px; font-size:16px; line-height:1; opacity:.6;
}
.pmadb-row-btn:hover{ opacity:1; }
.pmadb-row-btn[disabled]{ opacity:.25; cursor:default; }

/* summary cards */
.pmadb-budget-summary{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px; padding:12px; border-top:1px solid #e5e7eb; background:#f9fafb;
}
.pmadb-budget-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px;
}
.pmadb-budget-card h4{ margin:0 0 6px; font-size:13px; color:#475569; }
.pmadb-budget-card .val{ font-size:16px; font-weight:600; text-align:right; }
.pmadb-budget-card .sub{ font-size:12px; color:#64748b; text-align:right; }

@media (max-width: 900px){
  .pmadb-budget-table{ width:1000px; }
  .pmadb-budget-summary{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .pmadb-budget-summary{ grid-template-columns: 1fr; }
}