
:root{--navy:#06142f;--orange:#ff6a00;--pink:#ec1b73;--blue:#00adcd;--light:#f5f8fb;--text:#071229}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f5f8fb;color:#071229}.layout{display:grid;grid-template-columns:290px 1fr;min-height:100vh}.side{background:#06142f;color:white;padding:22px}.side img{width:235px;max-width:100%;display:block;margin:0 auto 22px;background:transparent}.side a,.side button{display:block;width:100%;text-align:left;border:0;text-decoration:none;color:#fff;background:rgba(255,255,255,.08);padding:13px 14px;border-radius:13px;margin:8px 0;font-weight:900;cursor:pointer}.side a:hover,.side a.active,.side button:hover{background:linear-gradient(90deg,#ff6a00,#ec1b73)}.main{padding:28px}.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}.top h1{margin:0;color:#06142f}.badge{background:linear-gradient(90deg,#ff6a00,#ec1b73);color:white;border-radius:999px;padding:10px 14px;font-weight:950}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}.card{background:#fff;border:1px solid #e5ebf3;border-radius:18px;padding:18px;box-shadow:0 10px 26px rgba(0,0,0,.06)}.card b{display:block;font-size:28px;color:#06142f;margin-top:8px}.panel{background:#fff;border:1px solid #e5ebf3;border-radius:20px;padding:20px;box-shadow:0 10px 26px rgba(0,0,0,.06);margin:18px 0;overflow:auto}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.action{border:0;border-radius:16px;background:#fff;border:1px solid #e5ebf3;padding:18px;text-align:left;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.05)}.action span{display:block;font-size:30px;margin-bottom:8px}.action:hover{transform:translateY(-3px)}table{width:100%;border-collapse:collapse;min-width:750px}th,td{padding:12px;border-bottom:1px solid #edf1f6;text-align:left;font-weight:800}th{background:#f5f8fb;color:#617084;text-transform:uppercase;font-size:12px}.status{border-radius:999px;padding:6px 10px;background:#fff4e8;color:#c85500;font-weight:950}.green{background:#eafff3;color:#067638}.blue{background:#edf5ff;color:#176bff}.field label{display:block;font-weight:950;margin:10px 0 6px}.field input,.field select,.field textarea{width:100%;border:1px solid #dfe6ef;border-radius:12px;padding:12px;font-family:Arial;font-weight:800}.field textarea{min-height:100px}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.full{grid-column:1/-1}.btn{border:0;background:#06142f;color:#fff;border-radius:12px;padding:12px 15px;font-weight:950;cursor:pointer;text-decoration:none;display:inline-block}.orange{background:#ff6a00!important}.pink{background:#ec1b73!important}.bluebtn{background:#176bff!important}.success{display:none;background:#eafff3;border:1px solid #a8edc2;color:#06642f;border-radius:12px;padding:13px;margin-top:12px;font-weight:900}@media(max-width:1000px){.layout{grid-template-columns:1fr}.cards,.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.cards,.grid,.formgrid{grid-template-columns:1fr}}


/* NEXT PHASE PRODUCTION CONTROL */
.kanban{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.kanban-col{background:#f7f9fc;border:1px solid #e5ebf3;border-radius:18px;overflow:hidden}
.kanban-head{padding:13px 14px;color:#fff;font-weight:950}
.kanban-body{padding:12px;display:grid;gap:10px;min-height:220px}
.job-card{background:#fff;border:1px solid #e5ebf3;border-radius:14px;padding:12px;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.job-card b{display:block;color:#06142f;margin-bottom:4px}
.job-card small{display:block;color:#617084;font-weight:800}
.job-card button{margin-top:8px;border:0;border-radius:10px;background:#06142f;color:#fff;padding:8px 10px;font-weight:900;cursor:pointer}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stat{background:#fff;border:1px solid #e5ebf3;border-radius:16px;padding:15px;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.stat strong{display:block;font-size:24px;color:#06142f;margin-top:6px}
.report-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.report-card{background:#fff;border:1px solid #e5ebf3;border-radius:16px;padding:17px;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.report-card h3{margin:0 0 8px;color:#06142f}
.report-card p{font-weight:750;color:#526071}
.tv-board{background:#06142f;color:#fff;min-height:100vh;padding:24px;font-family:Arial,Helvetica,sans-serif}
.tv-header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.tv-header img{height:82px;width:auto;background:transparent}
.tv-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:24px}
.tv-col{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden}
.tv-col h2{margin:0;padding:14px;color:#fff;font-size:18px}
.tv-job{margin:12px;background:#fff;color:#071229;border-radius:14px;padding:12px;font-weight:900}
.tv-job small{display:block;color:#617084;margin-top:5px}
@media(max-width:1200px){.kanban,.tv-grid{grid-template-columns:repeat(3,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}.report-list{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.kanban,.tv-grid,.stat-grid,.report-list{grid-template-columns:1fr}}


/* KIDS PHOTOSHOOT PHASE 3 */
.photo-stage-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.photo-stage{background:#f7f9fc;border:1px solid #e5ebf3;border-radius:16px;overflow:hidden}
.photo-stage h3{margin:0;padding:13px;color:white;font-size:15px}
.photo-stage-body{padding:12px;min-height:180px;display:grid;gap:10px}
.photo-booking-card{background:white;border:1px solid #e5ebf3;border-radius:14px;padding:12px;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.photo-booking-card b{display:block;color:#06142f}
.photo-booking-card small{display:block;color:#617084;font-weight:800;margin-top:4px}
.photo-booking-card button{margin-top:8px;border:0;border-radius:10px;background:#06142f;color:#fff;padding:8px 10px;font-weight:900;cursor:pointer}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.calendar-day{background:#fff;border:1px solid #e5ebf3;border-radius:14px;min-height:110px;padding:10px;font-weight:900}
.calendar-day .date{color:#06142f;font-size:20px}
.calendar-event{margin-top:8px;background:#fff0f7;color:#c2005d;border-radius:10px;padding:7px;font-size:12px;font-weight:950}
.gallery-delivery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-delivery-card{background:white;border:1px solid #e5ebf3;border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(6,20,47,.08)}
.gallery-delivery-card h3{margin:0 0 8px;color:#06142f}
.gallery-delivery-card p{font-weight:750;color:#526071}
@media(max-width:1100px){.photo-stage-grid{grid-template-columns:repeat(3,1fr)}.gallery-delivery-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.photo-stage-grid,.calendar-grid,.gallery-delivery-grid{grid-template-columns:1fr}}


/* KIDS PHOTOSHOOT PHASE 4 */
.money-card{
  background:white;border:1px solid #e5ebf3;border-radius:20px;padding:20px;
  box-shadow:0 10px 28px rgba(6,20,47,.08)
}
.money-card h3{margin:0 0 8px;color:#06142f}
.money-card strong{font-size:30px;color:#ff6a00}
.pay-status{display:inline-block;border-radius:999px;padding:7px 11px;font-weight:950;background:#fff4e8;color:#c85500}
.pay-status.paid{background:#eafff3;color:#067638}.pay-status.part{background:#edf5ff;color:#176bff}
.checklist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.checklist-box{background:white;border:1px solid #e5ebf3;border-radius:20px;padding:20px;box-shadow:0 10px 28px rgba(6,20,47,.08)}
.check-item{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #edf1f6;font-weight:850}
.check-item:last-child{border-bottom:0}
.check-item input{width:18px;height:18px}
.package-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.package-admin-card{background:white;border:1px solid #e5ebf3;border-radius:20px;padding:20px;box-shadow:0 10px 28px rgba(6,20,47,.08)}
.package-admin-card h3{margin:0;color:#06142f}.package-admin-card .price{font-size:26px;color:#ff6a00;font-weight:950;margin:10px 0}
.selection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.selection-card{background:white;border:1px solid #e5ebf3;border-radius:18px;overflow:hidden;box-shadow:0 10px 24px rgba(6,20,47,.08)}
.selection-card img{width:100%;height:190px;object-fit:cover;display:block}
.selection-card .sel-body{padding:13px;font-weight:900}
.selection-card.selected{outline:4px solid #ec1b73}
@media(max-width:1100px){.package-admin-grid,.selection-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.checklist-grid,.package-admin-grid,.selection-grid{grid-template-columns:1fr}}

/* LEAD ADMIN PHASE */
.lead-source{display:inline-block;border-radius:999px;background:#edf5ff;color:#176bff;padding:6px 10px;font-weight:950}

/* SERVICE ENQUIRIES PHASE */
.enquiry-source{display:inline-block;border-radius:999px;background:#fff0f7;color:#c2005d;padding:6px 10px;font-weight:950}

/* ONLINE ORDERS PHASE */
.order-source{display:inline-block;border-radius:999px;background:#eafff3;color:#067638;padding:6px 10px;font-weight:950}

/* CLIENT SELF SERVICE ADMIN */
.selfservice-tag{display:inline-block;border-radius:999px;background:#edf5ff;color:#176bff;padding:6px 10px;font-weight:950}


/* PHASE 11 - SPEED OPTIMIZED */
img{max-width:100%;height:auto}
img[loading="lazy"]{content-visibility:auto}
.shop-card,.kids-photo-tile,.jp-special,.jp-mini-product,.selection-card{background:#f1f5f9}
.jp-performance-note{background:#eafff3;border:1px solid #a8edc2;color:#06642f;border-radius:16px;padding:16px;font-weight:900}


/* PHASE 12 - MOBILE APP / PWA EXPERIENCE */
:root{
  --jp-mobile-navy:#06142f;
  --jp-mobile-orange:#ff6a00;
  --jp-mobile-pink:#ec1b73;
}
.jp-mobile-toggle{
  display:none;
  position:fixed;
  top:14px;
  right:14px;
  z-index:1000002;
  border:0;
  border-radius:14px;
  padding:12px 14px;
  background:linear-gradient(90deg,var(--jp-mobile-orange),var(--jp-mobile-pink));
  color:white;
  font-weight:950;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.jp-mobile-panel{
  display:none;
  position:fixed;
  inset:0 0 0 auto;
  width:min(360px,88vw);
  background:#06142f;
  color:#fff;
  z-index:1000001;
  padding:24px;
  overflow:auto;
  box-shadow:-20px 0 50px rgba(0,0,0,.35);
}
.jp-mobile-panel.open{display:block}
.jp-mobile-panel img{
  max-width:190px!important;
  max-height:90px!important;
  object-fit:contain!important;
  display:block!important;
  margin:0 auto 18px!important;
}
.jp-mobile-panel a{
  display:block;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.09);
  border-radius:14px;
  padding:14px;
  margin:8px 0;
  font-weight:900;
}
.jp-mobile-panel a:hover{
  background:linear-gradient(90deg,var(--jp-mobile-orange),var(--jp-mobile-pink));
}
.jp-mobile-close{
  width:100%;
  border:0;
  border-radius:14px;
  background:#ffffff18;
  color:#fff;
  padding:12px;
  font-weight:950;
  margin-bottom:12px;
}
.jp-install-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:1000003;
  background:#06142f;
  color:#fff;
  border-radius:20px;
  padding:16px;
  box-shadow:0 16px 45px rgba(0,0,0,.28);
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.jp-install-banner b{display:block}
.jp-install-banner small{color:#e9f3ff;font-weight:750}
.jp-install-banner button{
  border:0;
  border-radius:13px;
  padding:11px 14px;
  font-weight:950;
  color:#fff;
  background:linear-gradient(90deg,var(--jp-mobile-orange),var(--jp-mobile-pink));
}
.jp-install-banner button.jp-dismiss{
  background:#ffffff1f;
}
.jp-app-shortcuts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:1400px;
  margin:0 auto;
}
.jp-app-shortcut{
  background:#fff;
  border:1px solid #e5ebf3;
  border-radius:20px;
  padding:20px;
  text-decoration:none;
  color:#06142f;
  font-weight:950;
  box-shadow:0 10px 26px rgba(6,20,47,.08);
}
.jp-app-shortcut span{
  display:block;
  font-size:32px;
  margin-bottom:9px;
}
.jp-app-section{
  padding:45px 70px;
  background:#f7fbff;
}
@media(max-width:850px){
  .jp-mobile-toggle{display:block}
  .header .nav,
  header .nav,
  .topbar{
    display:none!important;
  }
  body{
    padding-top:0!important;
  }
  .jp-app-shortcuts{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:520px){
  .jp-app-shortcuts{
    grid-template-columns:1fr;
  }
  .jp-app-section{
    padding:34px 18px;
  }
  .jp-install-banner{
    flex-direction:column;
    align-items:stretch;
  }
}
