:root{
  --brand:#00C261;          /* BrightGreen */
  --brand-dark:#008D47;     /* DarkGreen */
  --ink:#0f172a;
  --ink-2:#334155;
  --bg:#f8fafc;
  --card:#ffffff;
  --line:#e5e7eb;
  --danger:#dc2626;
  --success:#047857;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif}
body{background:var(--bg);color:var(--ink)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:960px;margin:0 auto;padding:24px}
.center-page{min-height:calc(100dvh - 72px);display:flex;align-items:center;justify-content:center;padding:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 16px rgba(2,6,23,.06);padding:24px;width:100%;max-width:440px}
.card h1{font-size:22px;margin:0 0 12px}
.card p.hint{color:var(--ink-2);font-size:13px;margin-top:8px}

.input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:15px;outline:none;background:#fff}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,194,97,.15)}

.row{display:grid;gap:12px}
.row-2{grid-template-columns:1fr 1fr}
.actions{margin-top:6px;display:flex;gap:10px;justify-content:space-between;font-size:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:1px solid transparent;font-weight:600;cursor:pointer;user-select:none}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-2)}
.btn-danger{background:var(--danger);color:#fff}
.full{width:100%}

.notice{margin:8px 0 0;border:1px solid;color:#0a0;display:block;padding:10px 12px;border-radius:10px;font-size:14px}
.notice.error{border-color:#fecaca;color:#b91c1c;background:#fff1f2}
.notice.ok{border-color:#bbf7d0;color:#065f46;background:#ecfdf5}

/* Navbar */
.nav{
  height:72px;background:linear-gradient(90deg,var(--brand),var(--brand-dark));
  color:#fff;display:flex;align-items:center
}
.nav .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand .logo{width:32px;height:32px;border-radius:10px;background:#fff;display:grid;place-items:center;color:var(--brand-dark);font-weight:900}
.nav a{color:#e6fff2;text-decoration:none;margin-left:16px;font-weight:600}
.nav a:hover{color:#fff;text-decoration:underline}
.badge{display:inline-block;background:#ffffff22;border:1px solid #ffffff44;padding:2px 8px;border-radius:999px;font-size:12px;margin-left:8px}


/* =========================================================
   APPENDED: Shared Header & Footer (Poppins + new tokens)
   ========================================================= */

/* Poppins font for the app-wide typography */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Override brand tokens to the new palette */
:root{
  --brand:#00BE67;          /* New brand */
  --brand-dark:#089E57;     /* Accent/darker */
  --ring:rgba(0,190,103,.25);
  --footer-bg:rgba(0,190,103,.85);
}

/* Prefer Poppins globally (keeps system fallbacks) */
body{
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Layout helper so footer can stick to bottom when content is short */
html, body { min-height:100%; }
body { display:flex; flex-direction:column; }
.main-content { flex:1 0 auto; }   /* wrap your page content in .main-content */
.app-footer { flex-shrink:0; }

/* ---------- Header (shows only when logged-in; JS adds .visible) ---------- */
.app-header{
  border-bottom:2px solid var(--brand);
  background:#fff;
  position:relative;
  z-index:10;
  display:none;             /* default hidden; JS toggles to .visible */
}
.app-header.visible{ display:block; }

.app-header .bar{
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  max-width:1200px; margin:0 auto; padding:0 16px;
}

/* Use distinct class to avoid clashing with existing .brand */
.app-brand{display:flex; align-items:center; gap:12px}
.app-brand img.logo-main{height:36px; width:auto}
.app-brand img.logo-text{height:36px; width:auto}

/* Right-side action area */
.app-actions{display:flex; align-items:center; gap:8px}

/* Icon button */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; width:40px; border-radius:999px;
  border:1px solid #e7efe9; background:#fff;
  cursor:pointer; transition:transform .05s ease, box-shadow .15s ease, border .15s ease;
}
.icon-btn:focus-visible{ outline:2px solid var(--ring) }
.icon-btn:hover{ border-color:#d6e7df; box-shadow:0 1px 0 rgba(0,0,0,.04) }
.icon-btn:active{ transform:translateY(1px) }

/* Account menu (role-aware) */
.menu{ position:relative }
.menu .menu-btn{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px; border-radius:999px;
  border:1px solid #e7efe9; background:#fff; cursor:pointer;
}
.menu .menu-btn:hover{ border-color:#d6e7df }

.menu .who{ display:flex; flex-direction:column; line-height:1.1 }
.menu .who .name{ font-weight:600; font-size:13px }
.menu .who .email{ font-size:12px; color:#5a6f66 }

.popover{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:260px; background:#fff; border:1px solid #e7efe9; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.08); padding:8px; display:none;
}
.popover.open{ display:block }
.popover .section-title{ font-size:12px; color:#5a6f66; padding:6px 10px }
.popover a, .popover button{
  width:100%; text-align:left; padding:10px 12px; border-radius:10px; border:0; background:transparent; cursor:pointer;
  font:inherit; color:inherit; display:flex; align-items:center; gap:10px;
}
.popover a:hover, .popover button:hover{ background:#f5fbf8 }
.popover hr{
  border:0; height:1px; background:#edf3ef; margin:8px 4px;
}
/* Visibility helpers for role-based items (JS will toggle these) */
.hide{ display:none !important; }
/* === Footer: match other pages === */
footer.updated{
  margin-top:28px;
  color:#08352b;
  background:linear-gradient(0deg,#f0fbf6,#ffffff);
  border-top:1px solid var(--line);
}

footer.updated .footwrap{
  max-width:1160px;
  margin:0 auto;
  padding:24px 16px;
  display:grid;
  gap:18px;
}

/* 3-column layout on wide screens, stack on small */
@media (min-width:860px){
  footer.updated .footwrap{
    grid-template-columns:1.1fr 1fr 1fr;
  }
}

footer.updated h4{
  margin:0 0 8px;
  font-weight:900;
  color:#0b3b30;
}

footer.updated a{
  color:#0b3b30;
  text-decoration:underline;
}


/* ---------- Footer Panel (always visible) ---------- */
.app-footer{
  background:var(--footer-bg);
  color:#fff;
  padding:28px 0;
  border-top:2px solid var(--brand-dark);
}
.app-footer .wrap{
  max-width:1200px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:22px;
}
.app-footer h4{
  margin:0 0 10px; font-size:16px; font-weight:700;
}
.app-footer p, .app-footer a, .app-footer li{
  color:#eefdf5; font-size:14px; margin:0; line-height:1.5;
}
.app-footer a:hover{ color:#fff; text-decoration:underline }
.app-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
.app-footer .copyright{
  margin-top:14px; font-size:12px; color:#e8fff3; opacity:.95;
}

/* Footer responsiveness */
@media (max-width: 900px){
  .app-footer .wrap{ grid-template-columns:1fr; }
}

/* Header responsiveness */
@media (max-width: 720px){
  .app-header .bar{ height:72px }
  .app-brand img.logo-main{ height:32px }
  .app-brand img.logo-text{ height:22px }
  .menu .who .email{ display:none } /* keep it compact on mobile */
}


/* === PARCEL GRID (equal-height cards) === */
.parcel-grid{
display:grid; gap:14px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
align-items:stretch; /* equal height per row */
}
.dd {
  position:absolute;
  right:0; top:50px;
  background:#fff;
  border:1px solid #e6eef0;
  border-radius:12px;
  min-width:260px;
  max-height:320px;
  overflow-y:auto;
  box-shadow:0 18px 40px rgba(0,0,0,.14);
  padding:6px;
  display:none;
  z-index:20;
}
.dd::-webkit-scrollbar { width:6px }
.dd::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:6px }
.dd.show { display:block }


.parcel-card{
display:flex; flex-direction:column;
border:1px solid var(--line); border-radius:16px; background:#fff;
box-shadow:0 6px 16px rgba(2,6,23,.06);
min-height:178px; /* keeps visual consistency */
overflow:hidden; position:relative;
}


.parcel-card .head{ padding:14px 14px 8px; }
.parcel-card .title{
font-weight:700; font-size:15px; line-height:1.35;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; /* 2 lines max */
overflow:hidden; text-overflow:ellipsis; min-height:2.7em; /* reserves space so cards align */
}
.parcel-card .sub{
color:var(--ink-2); font-size:12.5px; margin-top:4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}


.parcel-card .body{ padding:10px 14px 0; flex:1 1 auto; }
.parcel-card .kvs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:13px }
.parcel-card .kvs .kv{ background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; padding:8px 10px; min-height:38px; }
.parcel-card .kvs .kv b{ display:block; font-size:11px; color:#64748b; margin-bottom:2px }


.parcel-card .foot{
display:flex; align-items:center; justify-content:space-between;
padding:10px 12px 12px; gap:8px
}


/* Buttons */
.btn-small{ padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:600 }
.btn-small:hover{ border-color:#cfd8e3 }
.btn-primary-small{ background:var(--brand); color:#fff; border-color:transparent }
.btn-primary-small:hover{ background:var(--brand-dark) }


/* Edit mode visuals */
.parcel-card.editing{ outline:2px solid var(--ring); box-shadow:0 8px 20px rgba(0,0,0,.06) }
.parcel-card input[type="text"], .parcel-card textarea{
width:100%; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:14px; background:#fff;
}
.parcel-card textarea{ min-height:60px; resize:vertical }


/* === Premium-locked card (refreshed) === */
.parcel-card.locked{
background:linear-gradient(135deg, rgba(0,190,103,.08), rgba(8,158,87,.12));
border:1px dashed rgba(0,190,103,.45);
}
.lock-ribbon{
position:absolute; top:12px; right:-46px; transform:rotate(35deg);
background:var(--brand); color:#fff; font-weight:700; font-size:12px;
padding:6px 70px; box-shadow:0 6px 12px rgba(0,0,0,.12);
}
.lock-pane{ text-align:center; padding:22px 16px 18px }
.lock-icon{ font-size:38px; line-height:1; margin-bottom:8px }
.lock-title{ font-weight:800; margin:0 0 6px }
.lock-copy{ color:#335; opacity:.85; font-size:13px; margin:0 auto 12px; max-width:28ch }
.lock-actions{ display:flex; justify-content:center; gap:10px }

/* ===== Mobile-friendly modal sizing ===== */

/* Make the modal a flex column so header/body/actions size predictably */
#detailsModal .modal{
  display:flex;
  flex-direction:column;
  max-height:88vh;                 /* never exceed viewport height */
}

/* Let the content area scroll while header/actions stay visible */
#detailsModal .modal .body{
  overflow:auto;
  max-height:calc(88vh - 120px);   /* ~60px head + ~60px actions */
}

/* Keep the timeline from growing too tall; it will scroll inside */
#detailsModal .timeline{
  max-height:50vh;
}

/* On narrow phones: tighter geometry and single-column details */
@media (max-width: 560px){
  #detailsModal .modal{ width:94vw; border-radius:18px !important; }
  #detailsModal .modal .head{ padding:14px 14px 8px; }
  #detailsModal .modal .body{ padding:14px; max-height:calc(90vh - 110px); }
  #detailsModal .timeline{ max-height:44vh; }
  #detailsModal .body .row{ flex-direction:column; gap:12px; }
  #detailsModal .actions{ gap:8px; }
}

/* Ensure the backdrop actually centers the modal */
#detailsModal.backdrop{
  align-items:center !important;
  justify-content:center !important;
}

/* ===== MOBILE DETAILS MODAL ENHANCEMENTS (append) ===== */
@media (max-width: 640px){
  /* Make the backdrop behave like a bottom sheet on phones */
  #detailsModal.backdrop{
    align-items:flex-end !important;   /* was centered globally; mobile = bottom */
    justify-content:center !important;
    padding:12px;                      /* breathing room around the sheet */
  }

  /* Full-height, scroll-safe sheet */
  #detailsModal .modal{
    width:100vw !important;
    height:100dvh;                     /* safe viewport height on iOS/Android */
    max-height:100dvh;
    border-radius:18px 18px 0 0 !important; /* top-rounded only */
    display:flex;
    flex-direction:column;
    overflow:hidden;                   /* keep internals tidy */
  }

  /* Sticky header */
  #detailsModal .head{
    position:sticky; top:0; z-index:2;
    background:#fbfdfc;
    border-bottom:1px solid #eef2f6;
  }

  /* Scroll only the content area */
  #detailsModal .body{
    flex:1 1 auto;
    min-height:0;                      /* critical for proper child scrolling */
    overflow:auto;
    padding:16px;
    padding-bottom:84px;               /* space for sticky actions + thumb area */
  }

  /* Timeline auto-height (no fixed tall box) */
  #detailsModal .timeline{
    height:auto; max-height:unset; min-height:160px;
  }

  /* Sticky action bar so buttons are always reachable */
  #detailsModal .actions{
    position:sticky; bottom:0; z-index:2;
    background:linear-gradient(180deg, #ffffffd6, #ffffff);
    border-top:1px solid #eef2f6;
    padding:12px 10px;
    margin:0;
    gap:8px;
  }

  /* Accommodate iOS home indicator */
  #detailsModal .actions::after{
    content:""; display:block;
    height:calc(env(safe-area-inset-bottom, 0px));
  }

  /* Bigger tap targets, nice wrapping */
  #detailsModal .btn{ min-height:44px; padding:12px 14px }
  #detailsModal .right-actions{ gap:8px; flex-wrap:wrap }
  #detailsModal .left-actions{ gap:8px }

  /* Stack the two columns */
  #detailsModal .body .row{ flex-direction:column; gap:12px }
  #detailsModal .body .col{ min-width:unset }
}

/* Keep desktop centered (your current rule) */
#detailsModal.backdrop{
  align-items:center !important;
  justify-content:center !important;
}