/* Custom styling for the Google Translate dropdown to match Tailwind's styles */
 .goog-te-banner-frame {
     display: none !important;
 }

 body {
     top: 0px !important;
 }

 a {
     text-decoration: none;
 }

 .goog-te-combo {
     background: none;
     color: #374151;
     border: none;
     padding: 0 4px;
     font-size: .78rem;
     font-family: 'Inter', sans-serif;
     font-weight: 500;
     height: 32px;
     cursor: pointer;
     outline: none;
     width: 100%;
 }

 .goog-te-combo:hover { color: #111827; }

 .goog-te-combo:focus { outline: none; }

 /* hide the Google logo */
 img[src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png"] {
     display: none;
 }

 .VIpgJd-ZVi9od-l4eHX-hSRGPd {
     display: none;
 }

 div.skiptranslate.goog-te-gadget {
     visibility: hidden;
     /* Hides the text without removing layout */
 }

 div.skiptranslate.goog-te-gadget select {
     visibility: visible;
     /* Ensures the dropdown is still visible */
 }


 /* hide the popup */
 .skiptranslate>iframe {
     height: 0 !important;
     border-style: none;
     box-shadow: none;
 }

 :root {
     /* Main PAFO green */
     --pafo-green-50: #f2f8f2;
     /* Lightest */
     --pafo-green-100: #e6f0e6;
     --pafo-green-200: #c8e0c8;
     --pafo-green-300: #4CAF50;
     /* Primary PAFO green */
     --pafo-green-400: #43a047;
     --pafo-green-500: #388e3c;
     --pafo-green-600: #2e7d32;
     --pafo-green-700: #1b5e20;
     /* Darkest */

     /* Semantic variations */
     --pafo-green-primary: var(--pafo-green-300);
     --pafo-green-hover: var(--pafo-green-400);
     --pafo-green-active: var(--pafo-green-500);
     --pafo-green-text: var(--pafo-green-700);
 }
/* ═══════════════════════════════════════════════
   GLOBALS  (moved from views/partials/head.ejs)
   ═══════════════════════════════════════════════ */

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Form input focus ring */
.form-input:focus { box-shadow: 0 0 0 2px rgba(76,175,80,.2); }

/* Modal backdrop */
.modal-backdrop { background-color: rgba(0,0,0,.5); }

/* Gantt container (head.ejs global override) */
.gantt-container { height: 600px; width: 100%; margin: 20px 0; }
#gantt_here      { width: 100%; height: 100%; }

/* Shared slide/fade animations */
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.animate-slide-in { animation: slideIn .3s ease-out; }
.animate-fade-out { animation: fadeOut .3s ease-out forwards; }

/* Inter font for the whole app */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
body { font-family: 'Inter', sans-serif; }

/* ── Tab / visibility utilities (used by view-project.ejs JS) ── */
.hidden       { display: none !important; }
.active-tab   { border-bottom: 2px solid #10b981; color: #10b981; }

/* ── Global responsive helpers ── */
@media (max-width: 640px) {
  /* Prevent tables from breaking layout — let them scroll */
  .table-responsive-wrap,
  .dataTables_wrapper          { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Padding / spacing tighter on mobile */
  .container, .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }

  /* Cards stack full width */
  .grid                        { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════════
   PAFO UI COMPONENT LIBRARY
   Reusable classes used across views — no inline <style> needed.
   ═══════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-pafo,
.btn-pafo-success,
.btn-pafo-gray,
.btn-pafo-excel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: .78rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.6;
}
.btn-pafo         { background: #4CAF50; color: #fff; }
.btn-pafo:hover   { background: #45a049; color: #fff; }
.btn-pafo-success       { background: #28a745; color: #fff; }
.btn-pafo-success:hover { background: #218838; color: #fff; }
.btn-pafo-gray          { background: #4b5563; color: #fff; }
.btn-pafo-gray:hover    { background: #374151; color: #fff; }
.btn-pafo-excel         { background: #059669; color: #fff; }
.btn-pafo-excel:hover   { background: #047857; color: #fff; }
.btn-pafo-back          { font-size: .78rem; color: #374151; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; }
.btn-pafo-back:hover    { color: #111827; }

/* ── Compact app table ───────────────────────────────────────── */
.app-table { border-collapse: collapse; width: 100%; font-size: .78rem; }
.app-table th {
  font-size: .73rem; font-weight: 600; color: #374151;
  background: #f9fafb; white-space: nowrap;
  padding: 6px 10px; border: 1px solid #e5e7eb;
  text-align: left;
}
.app-table td { padding: 5px 10px; border: 1px solid #e5e7eb; vertical-align: middle; }
.app-table tbody tr:hover { background: #f9fafb; }
.app-table .num { text-align: right; }
.app-table .row-component { background: #d1fae5; font-weight: 700; }
.app-table .row-activity  { background: #fef9c3; font-weight: 600; }
.app-table .row-subtotal  { background: #e5e7eb; font-weight: 600; }
.app-table .row-grand     { background: #4CAF50; color: #fff; font-weight: 700; }

/* ── Profile grid (label / value pairs) ─────────────────────── */
.profile-grid { display: grid; grid-template-columns: 200px 1fr; gap: 0; }
.profile-grid .lbl {
  font-size: .78rem; font-weight: 600; color: #6b7280;
  padding: 7px 12px 7px 0; border-bottom: 1px solid #f3f4f6;
}
.profile-grid .val {
  font-size: .82rem; color: #111827;
  padding: 7px 0; border-bottom: 1px solid #f3f4f6;
}
.profile-grid .lbl:last-of-type,
.profile-grid .val:last-of-type { border-bottom: none; }

/* ── Section header pill ─────────────────────────────────────── */
.sec-hdr {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
  background: #4CAF50; padding: 4px 10px;
  border-radius: 4px; margin: 16px 0 8px;
  display: inline-block;
}

/* ── Year budget badge (finance report) ──────────────────────── */
.yr-badge {
  display: inline-block; font-size: .72rem; color: #374151;
  background: #f3f4f6; border: 1px solid #e5e7eb;
  border-radius: 4px; padding: 1px 7px; margin: 1px 2px 1px 0;
  white-space: nowrap;
}
.yr-badge strong { color: #059669; }

/* ── Finance totals ──────────────────────────────────────────── */
.org-total  { font-weight: 600; color: #065f46; font-size: .88rem; }
.proj-total { font-weight: 600; color: #4CAF50; font-size: .88rem; }

/* ── Progress bar (implementation report) ────────────────────── */
.pct-bar-wrap { display: flex; align-items: center; gap: 6px; }
.pct-bar      { flex: 1; height: 6px; background: #e5e7eb; border-radius: 3px; min-width: 40px; }
.pct-bar-fill { height: 6px; border-radius: 3px; background: #059669; }

/* ── Legend dot ──────────────────────────────────────────────── */
.legend-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 6px; vertical-align: middle;
}

/* ── Form inputs ─────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 9px;
  font-size: .8rem;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.form-textarea { resize: vertical; }
.form-input::placeholder,
.form-textarea::placeholder { color: #9ca3af; }
.form-file { padding: .35rem .5rem; cursor: pointer; }
.form-input-readonly { background: #f9fafb; color: #6b7280; cursor: not-allowed; }

/* Label */
.form-label {
  display: block;
  font-size: .73rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 3px;
}

/* Help / hint text */
.form-hint {
  font-size: .7rem;
  color: #6b7280;
  margin-top: 2px;
}

/* ── Global form input focus (replaces broken focus:ring-pafo-green) ── */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus {
  border-color: #4CAF50 !important;
  box-shadow: 0 0 0 2px rgba(76,175,80,.12) !important;
  outline: none !important;
}

/* ── DataTable pagination ────────────────────────────────────── */
.dataTables_wrapper .dataTables_paginate { margin-top: 10px; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-block;
  padding: 3px 10px;
  margin: 0 2px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: .78rem;
  color: #374151 !important;
  background: #fff;
  cursor: pointer;
  line-height: 1.6;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #4CAF50 !important;
  border-color: #4CAF50 !important;
  color: #fff !important;
  font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed;
}

/* ── DataTable info + length + filter ───────────────────────── */
.dataTables_wrapper .dataTables_info {
  font-size: .76rem;
  color: #6b7280;
  padding-top: 10px;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  font-size: .78rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 3px 8px;
  color: #374151;
  outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76,175,80,.12);
}


/* ═══════════════════════════════════════════════════════════════
   NAV TOGGLE BUTTON (header)
   ═══════════════════════════════════════════════════════════════ */
.nav-toggle-wrap { position: relative; }

.nav-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  color: #374151;
  font-size: .82rem;
  transition: background .15s, border-color .15s;
}
.nav-toggle-btn:hover { background: #f3f4f6; border-color: #d1d5db; }

.nav-toggle-dropdown {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 180px;
  z-index: 400;
  padding: 6px 0;
}
.ntd-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
  padding: 4px 14px 6px;
}
.ntd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  font-size: .82rem;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.ntd-item:hover { background: #f0fdf4; color: #059669; }
.ntd-item i { color: #9ca3af; width: 14px; }
.ntd-item:hover i { color: #059669; }
.ntd-badge {
  margin-left: auto;
  font-size: .65rem;
  font-weight: 700;
  background: #dcfce7;
  color: #166534;
  border-radius: 4px;
  padding: 1px 6px;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
   ═══════════════════════════════════════════════════════════════ */
#pafo-sidebar {
  display: none; /* hidden by default — JS shows it when navMode=sidebar */
  flex-direction: column;
  width: 220px;
  min-width: 220px;
  background: #2E7D32;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
  flex-shrink: 0;
  z-index: 100;
}
#pafo-sidebar::-webkit-scrollbar { width: 4px; }
#pafo-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

#sidebar-inner { padding: 8px 0 24px; }

/* Group label */
.sb-group { margin-top: 2px; }
.sb-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #86efac;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.sb-group-label:hover { background: rgba(255,255,255,.06); }
.sb-group-label i { font-size: .72rem; color: #4ade80; width: 14px; }
.sb-chevron {
  margin-left: auto;
  font-size: .65rem !important;
  width: auto !important;
  color: rgba(255,255,255,.35) !important;
  transition: transform .2s;
}
.sb-group.open .sb-chevron { transform: rotate(180deg); }

/* Children collapsed by default */
.sb-group .sb-child { display: none; }
.sb-group.open .sb-child { display: flex; }

/* Sidebar item */
.sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  font-size: .78rem;
  font-weight: 500;
  color: #bbf7d0;
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.sb-item i { font-size: .75rem; color: #4ade80; width: 14px; flex-shrink: 0; }
.sb-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.sb-item:hover i { color: #fff; }
.sb-item.active { background: rgba(255,255,255,.15); color: #fff; font-weight: 600; }
.sb-item.active i { color: #fff; }

/* Child items indented */
.sb-child { padding-left: 36px; font-size: .75rem; }

/* Divider */
.sb-divider { height: 1px; background: rgba(255,255,255,.08); margin: 6px 12px; }

/* ── When sidebar is active: remove ribbon top padding, add sidebar layout ── */
body.nav-sidebar-mode .flex-1.overflow-x-hidden.overflow-y-auto,
body.nav-sidebar-mode main.flex-1.overflow-x-hidden {
  padding-top: 0 !important;
}

/* ── When ribbon is active: hide sidebar space ── */
body.nav-ribbon-mode #pafo-sidebar { display: none !important; }

/* ── Driver.js tour popover branding ── */
.pafo-tour-popover .driver-popover-title { color: #4CAF50; font-size: .88rem; font-weight: 700; }
.pafo-tour-popover .driver-popover-description { font-size: .78rem; color: #374151; }
.pafo-tour-popover .driver-popover-progress-text { font-size: .7rem; color: #6b7280; }
.pafo-tour-popover button.driver-popover-next-btn { background: #4CAF50 !important; border-color: #4CAF50 !important; font-size: .75rem; }
.pafo-tour-popover button.driver-popover-next-btn:hover { background: #45a049 !important; }
.pafo-tour-popover button.driver-popover-prev-btn { font-size: .75rem; }
.pafo-tour-popover button.driver-popover-close-btn { color: #9ca3af; }

/* ── Main content area ── */
.main-content { padding: 16px 16px 32px 32px; }

/* ── Highlight active sidebar link based on URL ── */

/* ── Google Translate wrapper — matches nav-toggle-btn ── */
.translate-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.translate-wrap:hover { background: #f3f4f6; border-color: #d1d5db; }
.translate-icon {
  font-size: .78rem;
  color: #374151;
  pointer-events: none;
  flex-shrink: 0;
}
.translate-wrap .skiptranslate { display: flex !important; align-items: center; }
.translate-wrap #google_translate_element { display: flex; align-items: center; }