/* 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-color: #f9fafb;
     /* Tailwind's bg-gray-100 */
     color: #4CAF50;
     /* Tailwind's text-pafo-green */
     border: 1px solid #d1d5db;
     /* Tailwind's border-gray-300 */
     padding: 0.5rem 1rem;
     /* Tailwind's padding values */
     border-radius: 0.375rem;
     /* Tailwind's rounded-md */
     font-size: 1rem;
     /* Tailwind's text-base */
 }

 /* hover styles */
 .goog-te-combo:hover {
     background-color: #e5e7eb;
     /* Tailwind's hover:bg-gray-200 */
     border-color: #9ca3af;
     /* Tailwind's hover:border-gray-400 */
 }

 /* 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; }
}