:root{
  --pt-primary:#1f4ad6;
  --pt-primary-dark:#13369e;
  --pt-accent:#ff7a59;
  --pt-bg:#f5f7fb;
  --pt-surface:#ffffff;
  --pt-border:#e3e7ee;
  --pt-text:#1d2434;
  --pt-muted:#6b7384;
  --pt-success:#198754;
  --pt-danger:#dc3545;
  --pt-warn:#f59f00;
  --pt-shadow:0 1px 2px rgba(20,30,60,.06),0 4px 16px rgba(20,30,60,.05);
  --pt-radius:.6rem;
}
html,body{height:100%}
body{
  background:var(--pt-bg);
  color:var(--pt-text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:14.5px;
}
a{color:var(--pt-primary);text-decoration:none}
a:hover{color:var(--pt-primary-dark);text-decoration:underline}

/* ── Layout shell ──────────────────────────────────────── */
.pt-layout{display:flex;min-height:100vh}
.pt-side{
  width:230px;flex:0 0 230px;background:#0f1729;color:#cfd5e3;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:10;
}
.pt-side .pt-brand{
  display:flex;align-items:center;gap:.65rem;
  padding:.9rem 1.2rem;font-weight:700;font-size:1.15rem;letter-spacing:.2px;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;
}
.pt-side .pt-brand:hover{text-decoration:none;color:#fff;background:rgba(255,255,255,.03)}
.pt-side .pt-brand-logo{width:32px;height:32px;flex:0 0 32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.pt-side .pt-brand-text{line-height:1}
.pt-side nav{flex:1;overflow-y:auto;padding:.5rem 0}
.pt-side nav a{
  display:flex;align-items:center;gap:.7rem;padding:.55rem 1.1rem;color:#cfd5e3;
  border-left:3px solid transparent;font-weight:500;font-size:.95rem;
}
.pt-side nav a:hover{background:rgba(255,255,255,.04);color:#fff;text-decoration:none}
.pt-side nav a.active{background:rgba(31,74,214,.18);border-left-color:var(--pt-accent);color:#fff}
.pt-side nav a .bi{font-size:1.05rem;width:1.2em;text-align:center}
.pt-side .pt-side-foot{padding:.7rem 1.1rem;font-size:.78rem;color:#7a8499;border-top:1px solid rgba(255,255,255,.06)}

.pt-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pt-top{
  background:#fff;border-bottom:1px solid var(--pt-border);
  padding:.55rem 1.25rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:5;
}
.pt-top .pt-search{flex:1;max-width:520px;position:relative}
.pt-top .pt-search input{
  width:100%;border:1px solid var(--pt-border);border-radius:999px;padding:.45rem 1rem .45rem 2.2rem;
  background:#f8f9fc;font-size:.92rem;
}
.pt-top .pt-search input:focus{outline:none;border-color:var(--pt-primary);background:#fff;box-shadow:0 0 0 3px rgba(31,74,214,.12)}
.pt-top .pt-search .bi-search{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--pt-muted)}

.pt-content{padding:1.4rem 1.5rem 4rem 1.5rem;max-width:1500px;width:100%}
.pt-page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:.75rem;flex-wrap:wrap}
.pt-page-head h1{font-size:1.35rem;font-weight:700;margin:0}
.pt-page-head .pt-sub{color:var(--pt-muted);font-size:.9rem}

/* ── Cards / surfaces ──────────────────────────────────── */
.pt-card{background:var(--pt-surface);border:1px solid var(--pt-border);border-radius:var(--pt-radius);box-shadow:var(--pt-shadow)}
.pt-card-body{padding:1.1rem 1.2rem}
.pt-card-head{padding:.85rem 1.2rem;border-bottom:1px solid var(--pt-border);display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-weight:600}

.pt-stat{
  background:var(--pt-surface);border:1px solid var(--pt-border);border-radius:var(--pt-radius);
  padding:.95rem 1.1rem;box-shadow:var(--pt-shadow);
}
.pt-stat .pt-stat-label{font-size:.8rem;color:var(--pt-muted);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.pt-stat .pt-stat-value{font-size:1.55rem;font-weight:700;margin-top:.2rem}
.pt-stat .pt-stat-foot{font-size:.78rem;color:var(--pt-muted);margin-top:.2rem}

/* ── Tables ───────────────────────────────────────────── */
/* Wrap a .pt-table in .pt-card and we'll provide horizontal scroll on mobile.
   But the cleanest pattern is to apply .pt-table-wrap on the immediate parent. */
.pt-card .pt-table,.pt-table-wrap{width:100%}
.pt-card{overflow:hidden}                     /* keeps rounded corners w/ inner scroll */
.pt-card > .pt-table-scroll,.pt-card > .pt-table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.pt-table{width:100%;border-collapse:separate;border-spacing:0;min-width:560px}
.pt-table th{
  text-align:left;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;
  color:var(--pt-muted);padding:.55rem .85rem;border-bottom:1px solid var(--pt-border);background:#fafbfd;
  white-space:nowrap;
}
.pt-table td{padding:.7rem .85rem;border-bottom:1px solid var(--pt-border);font-size:.93rem;vertical-align:middle}
.pt-table tr:hover td{background:#f8fafd}
.pt-table tr:last-child td{border-bottom:none}
.pt-table .pt-muted{color:var(--pt-muted)}

/* On phones, tables scroll horizontally inside the card.
   Each .pt-card containing a .pt-table gets a subtle hint that more is to the right. */
@media (max-width: 700px){
  .pt-card{position:relative}
  .pt-card > .pt-table{
    overflow-x:auto;display:block;-webkit-overflow-scrolling:touch;
  }
  .pt-table{font-size:.88rem;min-width:560px}
  .pt-table th{font-size:.7rem;padding:.45rem .6rem}
  .pt-table td{padding:.55rem .6rem}
  /* Right-edge gradient hint that more columns exist */
  .pt-card.pt-card-table-hint:after{
    content:"";position:absolute;right:0;top:38px;bottom:0;width:18px;pointer-events:none;
    background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.95));
  }
}

/* ── Buttons / forms ─────────────────────────────────── */
.btn{font-weight:500}
.btn-primary{background:var(--pt-primary);border-color:var(--pt-primary)}
.btn-primary:hover,.btn-primary:focus{background:var(--pt-primary-dark);border-color:var(--pt-primary-dark)}
.btn-accent{background:var(--pt-accent);border-color:var(--pt-accent);color:#fff}
.btn-accent:hover{background:#e76844;border-color:#e76844;color:#fff}
.form-label{font-weight:500;font-size:.88rem;color:#374055;margin-bottom:.25rem}
.form-control,.form-select{border-color:var(--pt-border);font-size:.93rem}
.form-control:focus,.form-select:focus{border-color:var(--pt-primary);box-shadow:0 0 0 3px rgba(31,74,214,.12)}
.form-text{color:var(--pt-muted)}
fieldset legend{font-size:.95rem;font-weight:600;color:#374055;padding:.5rem 0 .25rem;border-bottom:1px solid var(--pt-border);margin-bottom:.75rem}

/* ── Pills / badges ──────────────────────────────────── */
.pt-pill{display:inline-block;padding:.18rem .55rem;border-radius:999px;font-size:.75rem;font-weight:600;background:#eef2f8;color:#374055;line-height:1.5}
.pt-pill.pt-pill-success{background:#e1f5ec;color:#1c7c4a}
.pt-pill.pt-pill-warn{background:#fff5d9;color:#8a5b00}
.pt-pill.pt-pill-danger{background:#fbe1e3;color:#a92535}
.pt-pill.pt-pill-info{background:#dfeaff;color:#1a3da3}

/* ── Empty states ───────────────────────────────────── */
.pt-empty{text-align:center;padding:2.5rem 1rem;color:var(--pt-muted)}
.pt-empty .bi{font-size:2.4rem;color:#c9d0db;display:block;margin-bottom:.5rem}
.pt-empty h3{font-size:1.05rem;color:#374055;margin:.4rem 0}

/* ── Kanban (desktop) + stacked stage list (mobile) ─── */
.pt-kanban{display:flex;gap:.85rem;overflow-x:auto;padding-bottom:.5rem}
.pt-kcol{
  flex:0 0 280px;background:#eef1f6;border-radius:var(--pt-radius);
  display:flex;flex-direction:column;max-height:calc(100vh - 220px);
}
.pt-kcol-head{padding:.65rem .85rem;font-weight:600;font-size:.88rem;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid transparent;border-radius:var(--pt-radius) var(--pt-radius) 0 0}
.pt-kcol-list{padding:.55rem;display:flex;flex-direction:column;gap:.55rem;overflow-y:auto;flex:1;min-height:60px}
.pt-kcard{background:#fff;border:1px solid var(--pt-border);border-radius:.45rem;padding:.7rem .8rem;box-shadow:0 1px 1px rgba(20,30,60,.04);cursor:grab}
.pt-kcard:active{cursor:grabbing}
.pt-kcard .pt-kcard-title{font-weight:600;font-size:.92rem;line-height:1.25;margin-bottom:.2rem}
.pt-kcard .pt-kcard-meta{color:var(--pt-muted);font-size:.78rem;display:flex;justify-content:space-between;gap:.4rem;margin-top:.3rem}
.pt-kcard .pt-kcard-amount{font-weight:600;color:#13369e}
.pt-kcol.drop-target{outline:2px dashed var(--pt-primary);outline-offset:-4px}

/* Mobile: hide horizontal kanban, show .pt-stage-list grouped accordion-ish */
.pt-stage-list{display:none}
@media (max-width: 900px){
  .pt-kanban{display:none}
  .pt-stage-list{display:block}
}
.pt-stage-group{
  background:#fff;border:1px solid var(--pt-border);border-radius:var(--pt-radius);
  margin-bottom:.7rem;overflow:hidden;
}
.pt-stage-group summary{
  list-style:none;cursor:pointer;padding:.7rem .9rem;
  display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.95rem;
}
.pt-stage-group summary::-webkit-details-marker{display:none}
.pt-stage-group[open] summary{border-bottom:1px solid var(--pt-border)}
.pt-stage-row{
  padding:.65rem .9rem;border-bottom:1px solid var(--pt-border);
  display:flex;justify-content:space-between;gap:.5rem;align-items:center;
}
.pt-stage-row:last-child{border-bottom:none}
.pt-stage-row .pt-stage-title{font-weight:600;font-size:.92rem}
.pt-stage-row .pt-stage-meta{color:var(--pt-muted);font-size:.78rem}

/* ── Activity timeline ─────────────────────────────── */
.pt-timeline{position:relative;padding-left:1.5rem}
.pt-timeline:before{content:"";position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:2px;background:var(--pt-border)}
.pt-tl-item{position:relative;margin-bottom:1rem;padding-bottom:.4rem}
.pt-tl-item:before{content:"";position:absolute;left:-1.05rem;top:.3rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--pt-primary);box-shadow:0 0 0 3px #fff}
.pt-tl-item.pt-tl-call:before{background:#0d6efd}
.pt-tl-item.pt-tl-email:before{background:#6610f2}
.pt-tl-item.pt-tl-meeting:before{background:#fd7e14}
.pt-tl-item.pt-tl-note:before{background:#6c757d}
.pt-tl-item.pt-tl-task:before{background:#198754}
.pt-tl-meta{font-size:.78rem;color:var(--pt-muted);margin-bottom:.15rem}

/* ── Mobile bottom nav + topbar tweaks ───────────────── */
.pt-bottom{display:none}
@media (max-width: 900px){
  .pt-side{display:none}
  .pt-content{padding:.85rem .85rem 6rem .85rem}
  /* Compact, single-row topbar with search expanding to fill */
  .pt-top{padding:.45rem .75rem;gap:.5rem}
  .pt-top .pt-search{max-width:none;flex:1}
  .pt-top .pt-search input{padding:.4rem .85rem .4rem 2rem;font-size:.9rem}
  .pt-top .pt-search .bi-search{left:.7rem}
  /* Hide secondary buttons on the topbar — quick-add is on the FAB or bottom nav */
  .pt-top .pt-hide-mobile{display:none !important}
  .pt-page-head{margin-bottom:.75rem}
  .pt-page-head h1{font-size:1.15rem}
  .pt-page-head .pt-sub{font-size:.82rem}

  .pt-bottom{
    display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--pt-border);
    z-index:20;justify-content:space-around;padding:.3rem 0 max(.3rem, env(safe-area-inset-bottom));
    box-shadow:0 -4px 18px rgba(15,23,41,.07);
  }
  .pt-bottom a{
    flex:1;display:flex;flex-direction:column;align-items:center;color:var(--pt-muted);
    font-size:.68rem;padding:.3rem 0;text-decoration:none;
  }
  .pt-bottom a.active{color:var(--pt-primary)}
  .pt-bottom a .bi{font-size:1.25rem;margin-bottom:.05rem}

  /* Stat cards stack 1-up on phones for thumb readability */
  .row.g-3 > [class*="col-6"]{flex:0 0 100%;max-width:100%}
  .row.g-3 > [class*="col-6"].col-lg-3{flex:0 0 50%;max-width:50%}
}

/* Bigger tap targets on touch devices, regardless of width */
@media (hover: none) and (pointer: coarse){
  .btn{min-height:38px}
  .form-control,.form-select{min-height:40px}
  .pt-pill{padding:.3rem .65rem}
}

.pt-quickadd{
  position:fixed;right:1.25rem;bottom:1.25rem;width:54px;height:54px;border-radius:50%;
  background:var(--pt-accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;border:none;box-shadow:0 8px 24px rgba(255,122,89,.45);z-index:30;
}
.pt-quickadd:hover{background:#e76844;color:#fff}
@media (max-width: 900px){.pt-quickadd{bottom:5rem}}

/* Floating feedback FAB — bottom-left so it doesn't collide with quick-add */
.pt-fb-fab{
  position:fixed;left:1.25rem;bottom:1.25rem;height:38px;padding:0 .9rem;border-radius:999px;
  background:#0f1729;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.85rem;font-weight:600;border:none;box-shadow:0 6px 18px rgba(15,23,41,.3);z-index:30;
}
.pt-fb-fab:before{content:"Report";font-size:.85rem}
.pt-fb-fab .bi{font-size:1rem}
.pt-fb-fab:hover{background:#1f4ad6;color:#fff}
@media (max-width: 900px){
  .pt-fb-fab{bottom:5rem;left:1rem;height:34px;padding:0 .7rem}
  .pt-fb-fab:before{display:none}
}

/* ── Login ─────────────────────────────────────────── */
.pt-login-body{
  min-height:100vh;margin:0;background:#0a0f1d;overflow:hidden;position:relative;
  /* Phones see this still backdrop instead of the video. */
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(31,74,214,.55) 0%, rgba(15,23,41,.85) 60%, #0a0f1d 100%),
    #0a0f1d;
}
.pt-login-video{
  position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0;
  filter:brightness(.55) saturate(1.05);
}
.pt-login-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(31,74,214,.45) 0%, rgba(15,23,41,.7) 60%, rgba(15,23,41,.92) 100%),
    linear-gradient(180deg, rgba(15,23,41,.4) 0%, rgba(15,23,41,.85) 100%);
}
/* Don't load the 10 MB video on phones / spotty cellular */
@media (max-width: 800px){
  .pt-login-video{display:none}
  .pt-login-overlay{display:none}
}
.pt-login-wrap{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.pt-login-card{
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-radius:.9rem;padding:2rem 2rem 1.6rem;width:100%;max-width:400px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.pt-login-card .pt-login-brand{text-align:center;margin-bottom:1.5rem}
.pt-login-logo{width:84px;height:84px;display:block;margin:0 auto .5rem;filter:drop-shadow(0 4px 12px rgba(15,23,41,.25))}
.pt-login-name{font-size:1.6rem;font-weight:700;color:#0f1729;letter-spacing:-.4px}
.pt-login-tag{color:var(--pt-muted);font-size:.85rem;margin-top:.1rem}

/* ── Misc utilities ────────────────────────────────── */
.pt-muted{color:var(--pt-muted)}
.pt-divider{height:1px;background:var(--pt-border);margin:1rem 0}
.pt-tag-row{display:flex;gap:.4rem;flex-wrap:wrap}
.text-money{font-variant-numeric:tabular-nums}