/* =================================================================
   Project Perfect – Core UI (clean, aligned, production-ready)
   Brand: #0071c5
   ================================================================= */

/* Reset / base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:14px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans";
  color:#111827;
  background:#f5f7fa;
}

/* ---------------------------------
   Container (centers all content)
---------------------------------- */
.container, .pp-container, .pp-header__inner, .pp-footer__inner {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* ---------------------------------
   App layout (sticky header + footer)
---------------------------------- */
.page-wrap{min-height:100vh;display:flex;flex-direction:column}
main.pp-main{flex:1 0 auto;padding:20px 0 28px}
.pp-footer{flex-shrink:0}

/* ---------------------------------
   Header (supports BOTH .pp-header and .header)
---------------------------------- */
.pp-header, .header{
  position:sticky;top:0;z-index:1000;
  background:#0071c5;color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.12);
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}
.pp-header__inner, .header{height:56px;display:flex;align-items:center;justify-content:space-between}
.pp-brand, .header h1{font-weight:700;font-size:16px;letter-spacing:.2px;margin:0}
.pp-page-title{font-weight:600;font-size:14px;opacity:.95}

/* ---------------------------------
   Optional top nav (tabs / menu)
---------------------------------- */
.top-menu{
  background:#fff;border-bottom:1px solid #e2e8f0;
  position:sticky;top:56px;z-index:900;
  display:flex;align-items:center;gap:8px;padding:8px 16px;overflow-x:auto;
}
.top-menu a{
  color:#64748b;text-decoration:none;padding:10px 12px;border-radius:6px;white-space:nowrap;
  transition:background .15s ease,color .15s ease
}
.top-menu a:hover{color:#0071c5;background:#f1f5f9}
.top-menu a.active{color:#0071c5;background:#e0f2fe;font-weight:600}

/* ---------------------------------
   Sections as cards (clear demarcation)
---------------------------------- */
.card, .pp-section, .form-section, .users-section, .tab-content, .pp-login-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;margin:16px 0;
  box-shadow:0 1px 2px rgba(0,0,0,0.04)
}

/* Section headers (flush band) */
.section-header, .pp-section-header{
  margin:-16px -16px 12px;
  padding:12px 16px;
  background:#fafbfc;border-bottom:1px solid #e5e7eb;
  border-top-left-radius:10px;border-top-right-radius:10px;
}
.section-header h2, .pp-section-header h2{margin:0;font-size:18px;color:#0f172a}

/* Content wrapper for older markup */
.content{margin:20px 0}
.content > .card{margin-top:16px}

/* ---------------------------------
   Forms
---------------------------------- */
form{display:grid;gap:10px}
.form-group{display:grid;gap:6px;max-width:460px}
label{font-weight:600;color:#374151}
input[type="text"],input[type="email"],input[type="password"],select,textarea{
  width:100%;height:36px;max-width:460px;
  padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111827;
  outline:0;transition:border-color .15s ease, box-shadow .15s ease
}
textarea{min-height:96px;height:auto}
input:focus,select:focus,textarea:focus{border-color:#0071c5;box-shadow:0 0 0 3px rgba(0,113,197,.12)}

/* Inline forms in tables/actions */
.inline-form{display:inline-flex;gap:8px;align-items:center}

/* ---------------------------------
   Buttons
---------------------------------- */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 12px;border-radius:8px;border:1px solid transparent;
  background:#0071c5;color:#fff;font-weight:700;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,opacity .15s ease
}
button:hover,.btn:hover{background:#0064af}
button:disabled,.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-secondary{background:#fff;color:#111827;border-color:#d1d5db}
.btn-danger{background:#dc2626}
.btn-ghost{background:transparent;color:#0071c5}

/* ---------------------------------
   Flash messages
---------------------------------- */
.pp-flash{border-radius:8px;padding:10px 12px;margin:10px 0;border:1px solid #e5e7eb}
.pp-flash.success{background:#edf9f0;color:#14532d;border-color:#cfeedd}
.pp-flash.error{background:#fdf2f3;color:#7f1d1d;border-color:#f3cfd4}

/* ---------------------------------
   Tables (solid & readable)
---------------------------------- */
.table-container{display:block;max-height:520px;overflow:auto;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
table{width:100%;border-collapse:collapse;background:#fff}
thead{position:sticky;top:0;background:#f8fafc;z-index:5}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #eef1f4}
th{font-weight:700;font-size:14px;color:#4b5563;text-transform:capitalize}
td{font-size:14px;color:#111827;vertical-align:middle;word-wrap:break-word}
tbody tr:hover{background:#fbfdff}
.actions{display:inline-flex;gap:8px;flex-wrap:wrap}
.actions-cell{white-space:nowrap}
td input, td textarea{
  width:100%;padding:8px 10px;font-size:14px;border:1px solid #d1d5db;border-radius:6px;background:#fff
}
td input:focus, td textarea:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.35)}

/* Badges (status) */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;background:#f3f4f6;border:1px solid #e5e7eb;color:#374151}
.badge.on{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.badge.off{background:#fef2f2;color:#991b1b;border-color:#fecaca}

/* ---------------------------------
   Tooltips
---------------------------------- */
.tooltip2{
  position:fixed;background:#333;color:#fff;padding:5px 10px;border-radius:5px;font-size:12px;white-space:nowrap;
  visibility:hidden;opacity:0;transition:opacity .1s;pointer-events:none;z-index:1000
}
.tooltip{
  position:absolute;background:rgba(0,0,0,.8);color:#fff;padding:5px 10px;border-radius:5px;font-size:13px;white-space:nowrap;
  display:none;z-index:100
}

/* ---------------------------------
   Kanban & metrics (lightweight)
---------------------------------- */
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:12px}
.metric-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);text-align:center}
.metric-card h3{color:#64748b;font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px}
.metric-value{font-size:28px;font-weight:700;color:#0071c5}

.kanban-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:12px}
.kanban-column{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:14px;min-height:380px}
.kanban-column h3{margin:0 0 10px;color:#4b5563;font-size:14px;font-weight:700}
.kanban-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px;box-shadow:0 1px 2px rgba(0,0,0,.04);margin-bottom:10px}

/* Week cards (responsive) */
.week-card-container{display:flex;flex-wrap:wrap;gap:16px}
.week-card{background:#f4f6f8;border:1px solid #e5e7eb;border-radius:10px;padding:14px;width:calc(33.33% - 10.7px);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.weekkanban-card{margin-bottom:10px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:10px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
@media (max-width: 900px){.week-card{width:calc(50% - 8px)}}
@media (max-width: 520px){.week-card{width:100%}}

/* Comments */
.comment-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);margin-bottom:12px}
.comment-date{color:#64748b;font-size:13px;margin-bottom:6px}
.comment-author{font-size:13px;color:#4b5563;margin-bottom:6px}
.comment-content{color:#1f2937}

/* Charts holders */
.chart-container{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);margin:16px 0}
.charts-grid{display:grid;gap:16px;grid-template-columns:1fr}

/* Floating button */
.floating-button{
  position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;
  background:#0071c5;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);z-index:100
}

/* Info block */
.info-block{background:#f9f9f9;border:1px solid #e5e7eb;padding:14px;border-radius:10px;margin-top:16px}
.info-block h3{margin:0 0 6px;color:#111827}

/* ---------------------------------
   Footer
---------------------------------- */
.pp-footer{background:#eef0f3;color:#374151;border-top:1px solid #e5e7eb}
.pp-footer__inner{height:52px;display:flex;align-items:center;justify-content:center}

/* Sticky footer layout */
html, body { height: 100%; }
.page-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.pp-main { flex: 1 0 auto; }
.site-footer { flex: 0 0 auto; }


/* ---------------------------------
   Login page auto-centering
---------------------------------- */
main.pp-main > section:first-of-type{max-width:480px;margin:24px auto}
.pp-login-title{margin-bottom:10px}
.pp-login-form{display:grid;gap:10px}

/* Responsive small tweaks */
@media (max-width:720px){
  .pp-header__inner{padding:0 12px}
  .top-menu{padding:8px 12px}
}