:root{
    --ink:#14232F;
    --ink-2:#1E3542;
    --amber:#F2994A;
    --amber-soft:#FDF1E4;
    --teal:#0E7C7B;
    --teal-soft:#E4F3F2;
    --green:#1E8E5A;
    --green-soft:#E7F5EC;
    --red:#E5484D;
    --paper:#F5F6F4;
    --card:#FFFFFF;
    --slate:#5B6472;
    --line:#E6E8E6;
    --ink-text:#142230;
     --red:#dc2626;
  --red-soft:#fee2e2;
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:var(--paper);
    font-family:'Plus Jakarta Sans', system-ui, sans-serif;
    color:var(--ink-text);
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}

  /* ---------- mobile shell (frames the template for preview; content stays fully responsive) ---------- */
  .app-shell{
    max-width:430px;
    margin:0 auto;
    min-height:100vh;
    background:var(--paper);
    position:relative;
    display:flex;
    flex-direction:column;
    box-shadow:0 0 40px rgba(20,35,47,0.08);
  }
  @media (min-width:431px){
    .app-shell{min-height:calc(100vh - 48px); overflow:hidden;}
  }

  main{
    margin-bottom:45px;
  }

  /* ---------- top bar ---------- */
  .topbar{
    background:var(--ink);
    color:#fff;
    padding:14px 16px;
    position:sticky;
    top:0;
    z-index:20;
  }
  .brand-mark{
    width:38px;height:38px;
    border-radius:10px;
    background:var(--amber);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
    flex:none;
  }
  .brand-title{font-weight:700;font-size:15px;line-height:1.2;}
  .brand-sub{font-size:11.5px;color:#9FB4BE;line-height:1.2;}

  .notif-btn{
    color:#fff;
    background:rgba(255,255,255,0.08);
    border:none;
    width:38px;height:38px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;
  }
  .notif-btn:hover, .notif-btn:focus{color:#fff; background:rgba(255,255,255,0.16);}
  .notif-dot{
    position:absolute;
    top:7px; right:7px;
    width:8px;height:8px;
    background:var(--red);
    border-radius:50%;
    border:2px solid var(--ink);
  }

  .notif-menu{
    width:320px;
    max-width:88vw;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 14px 32px rgba(20,35,47,0.18);
    overflow:hidden;
  }
  .notif-head{
    font-weight:700;
    font-size:14px;
    background:var(--paper);
  }
  .notif-count{
    font-size:11.5px;
    font-weight:600;
    color:var(--amber);
    background:var(--amber-soft);
    padding:2px 8px;
    border-radius:20px;
  }
  .notif-item{
    display:flex;
    gap:10px;
    padding:10px 14px;
    white-space:normal;
    border-bottom:1px solid var(--line);
  }
  .notif-item:last-of-type{border-bottom:none;}
  .notif-item.unread{background:#FBFBFA;}
  .notif-icon{
    width:34px;height:34px;
    border-radius:9px;
    flex:none;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;
  }
  .bg-amber{background:var(--amber-soft); color:var(--amber);}
  .bg-teal{background:var(--teal-soft); color:var(--teal);}
  .bg-green{background:var(--green-soft); color:var(--green);}
  .notif-title{font-size:13px; font-weight:600; color:var(--ink-text); line-height:1.3;}
  .notif-desc{font-size:12px; color:var(--slate); line-height:1.3;}
  .notif-time{font-size:11px; color:#95A0A8; margin-top:2px;}
  .notif-view-all{font-size:12.5px; font-weight:600; color:var(--teal);}

  /* ---------- greeting / stats ---------- */
  .greeting{font-size:17px; font-weight:700;}
  .greeting-sub{font-size:12.5px; color:var(--slate); margin-top:1px;}
  .stat-pill{
    flex:1;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px 8px;
    text-align:center;
  }
  .stat-num{font-size:19px; font-weight:800; font-family:'IBM Plex Mono', monospace;}
  .stat-label{font-size:11px; color:var(--slate); margin-top:1px;}

  /* ---------- section heads ---------- */
  .section-title{font-size:14.5px; font-weight:700; margin:0;}
  .section-link{font-size:12px; font-weight:600; color:var(--teal); text-decoration:none;}

  /* ---------- service cards ---------- */
  .service-card{
    background:var(--card);
    border:1px solid var(--line);
    border-left:4px solid var(--slate);
    border-radius:10px;
    padding:12px 14px;
  }
  .service-card.status-new{border-left-color:var(--amber);}
  .service-card.status-progress{border-left-color:var(--teal);}
  .service-card.status-done{border-left-color:var(--green);}

  .job-code{font-size:11.5px; color:var(--slate);}
  .badge-status{
    font-size:11px;
    font-weight:700;
    padding:2px 9px;
    border-radius:20px;
  }
  .status-new .badge-status{background:var(--amber-soft); color:var(--amber);}
  .status-progress .badge-status{background:var(--teal-soft); color:var(--teal);}
  .status-done .badge-status{background:var(--green-soft); color:var(--green);}

  .service-name{font-size:14.5px; font-weight:700; margin-top:4px;}
  .service-cust, .service-addr{
    font-size:12.5px; color:var(--slate);
    display:flex; align-items:center; gap:6px;
    margin-top:2px;
  }
  .service-time{font-size:11.5px; color:#8B959D; display:flex; align-items:center; gap:5px;}
  .btn-detail{
    font-size:12px;
    font-weight:600;
    color:var(--teal);
    background:var(--teal-soft);
    border:none;
    padding:5px 12px;
    border-radius:8px;
  }
  .btn-detail:hover{background:var(--teal); color:#fff;}

  /* ---------- pelanggan (customers) ---------- */
  .search-box{
    display:flex; align-items:center; gap:8px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:9px 12px;
  }
  .search-box i{color:var(--slate);}
  .search-box input{
    border:none; outline:none; flex:1;
    font-size:13.5px; background:transparent;
  }

  .customer-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .avatar-circle{
    width:42px;height:42px;
    border-radius:50%;
    background:var(--ink-2);
    color:#fff;
    font-weight:700;
    font-size:14px;
    display:flex;align-items:center;justify-content:center;
    flex:none;
  }
  .customer-name{font-size:14px; font-weight:700;}
  .customer-meta{font-size:12px; color:var(--slate); display:flex; align-items:center; gap:5px; margin-top:1px;}
  .icon-action{
    width:34px;height:34px;
    border-radius:9px;
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-text);
    flex:none;
  }
  .icon-action.call{background:var(--green-soft); color:var(--green); border-color:transparent;}

  /* ---------- empty state ---------- */
  .empty-state{
    text-align:center;
    padding:60px 20px;
    color:var(--slate);
  }
  .empty-state i{font-size:34px; color:var(--line); display:block; margin-bottom:10px;}
  .empty-state .empty-title{font-weight:700; color:var(--ink-text); font-size:14.5px; margin-bottom:3px;}
  .empty-state .empty-desc{font-size:12.5px;}

  /* ---------- bottom nav (fixed) ---------- */
  .bottom-nav{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    width:100%;
    max-width:430px;
    height:64px;
    background:var(--card);
    border-top:1px solid var(--line);
    display:flex;
    align-items:stretch;
    padding:0 4px;
    z-index:1000;
  }
  .nav-item{
    flex:1;
    border:none;
    background:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:6px 2px;
    color:#9AA4AC;
    font-size:10.5px;
    font-weight:600;
    border-radius:10px;
  }
  .nav-item i{font-size:19px;}
  .nav-item.active{color:var(--teal);}

  /* keep content from hiding behind the fixed bottom nav / action bar */
  #main-app > main{ padding-bottom:80px; }
  #view-detail{ padding-bottom:74px; }

  /* ---------- detail view ---------- */
  .detail-header{
    background:var(--ink);
    color:#fff;
    padding:14px 16px 18px;
  }
  .back-btn{
    width:34px;height:34px;
    border-radius:9px;
    background:rgba(255,255,255,0.08);
    border:none;
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;
  }
  .detail-header-title{font-size:13.5px; font-weight:600; color:#B9C8CF;}
  .detail-job-name{font-size:19px; font-weight:800; margin-top:6px;}
  .detail-job-code{font-size:12px; color:#9FB4BE;}

  .detail-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px;
  }
  .detail-label{font-size:11px; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:8px;}
  .detail-row{display:flex; align-items:flex-start; gap:10px;}
  .detail-row + .detail-row{margin-top:10px;}
  .detail-row i{color:var(--teal); font-size:15px; margin-top:1px;}
  .detail-row-title{font-size:13.5px; font-weight:600;}
  .detail-row-sub{font-size:12px; color:var(--slate); margin-top:1px;}
  .detail-desc{font-size:13px; color:var(--ink-text); line-height:1.5;}

  .timeline{position:relative; padding-left:18px; margin:0;list-style:none}
  .timeline-item{position:relative; padding-bottom:16px;}
  .timeline-item:last-child{padding-bottom:0;}
  .timeline-dot{
    position:absolute; left:-18px; top:2px;
    width:10px;height:10px; border-radius:50%;
    background:var(--line);
  }
  .timeline-item::before{
    content:'';
    position:absolute; left:-14px; top:12px; bottom:-4px;
    width:2px; background:var(--line);
  }
  .timeline-item:last-child::before{display:none;}
  .timeline-item.done .timeline-dot{background:var(--teal);}
  .timeline-item.done::before{background:var(--teal);}
  .timeline-label{font-size:13px; font-weight:600;}
  .timeline-time{font-size:11.5px; color:var(--slate); margin-top:1px;}

  .action-bar{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:64px;
    width:100%;
    max-width:430px;
    background:var(--card);
    border-top:1px solid var(--line);
    padding:10px 16px;
    display:flex;
    gap:8px;
    z-index:900;
  }
  .btn-outline-call{
    flex:none;
    width:46px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--card);
    color:var(--teal);
    font-size:17px;
    display:flex;align-items:center;justify-content:center;
  }
.btn-action-primary{
  flex:1;
  border:none;
  border-radius:10px;
  background:var(--teal);
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  padding:10px;
  cursor:pointer;
  transition:all .2s ease;
}

/* SUCCESS */
.btn-action-primary.success{
  background:var(--green-soft);
  color:var(--green);
}

/* DANGER */
.btn-action-primary.danger{
  background:var(--red-soft);
  color:var(--red);
}

/* INFO */
.btn-action-primary.info{
  background:var(--blue-soft);
  color:var(--blue);
}

/* Default / Primary */
.btn-action-primary.primary{
  background:var(--teal);
  color:#fff;
}

/* Disabled */
.btn-action-primary:disabled{
  opacity:0.7;
  cursor:not-allowed;
}


  /* ---------- profile ---------- */
  .profile-header{
    background:var(--ink);
    color:#fff;
    padding:24px 20px 22px;
    text-align:center;
  }
  .profile-avatar{
    width:72px;height:72px;
    border-radius:50%;
    background:var(--amber);
    color:var(--ink);
    font-weight:800;
    font-size:24px;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 10px;
  }
  .profile-name{font-size:17px; font-weight:700;}
  .profile-role{font-size:12.5px; color:#9FB4BE; margin-top:1px;}
  .profile-badge{
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700;
    background:rgba(30,142,90,0.18);
    color:#6FDBA0;
    padding:3px 10px;
    border-radius:20px;
    margin-top:8px;
  }
  .profile-badge i{font-size:8px;}

  .profile-stat-row{display:flex; gap:2px; text-align:center; margin-top:16px;}
  .profile-stat{flex:1;}
  .profile-stat-num{font-size:16px; font-weight:800; font-family:'IBM Plex Mono', monospace;}
  .profile-stat-label{font-size:10.5px; color:#9FB4BE; margin-top:1px;}
  .profile-stat-div{width:1px; background:rgba(255,255,255,0.15);}

  .menu-list{display:flex; flex-direction:column; gap:8px;}
  .menu-item{
    display:flex; align-items:center; gap:12px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 14px;
    text-decoration:none;
    color:var(--ink-text);
  }
  .menu-icon{
    width:36px;height:36px;
    border-radius:9px;
    background:var(--teal-soft);
    color:var(--teal);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;
    flex:none;
  }
  .menu-item.danger .menu-icon{background:#FCE8E8; color:var(--red);}
  .menu-item-title{font-size:13.5px; font-weight:600;}
  .menu-item .bi-chevron-right{margin-left:auto; color:#C4CBCE; font-size:14px;}

  /* ---------- workflow panels: diagnosa / penawaran / rincian / hasil ---------- */
  .workflow-toggle{
    width:100%;
    display:flex; align-items:center; gap:10px;
    background:none; border:none;
    padding:13px 14px;
    text-align:left;
  }
  .workflow-icon{
    width:32px;height:32px;
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;
    flex:none;
  }
  .workflow-toggle-title{font-size:13.5px; font-weight:700; flex:1; color:var(--ink-text);}
  .workflow-chevron{color:var(--slate); font-size:13px; transition:transform .2s ease;}
  .workflow-toggle[aria-expanded="true"] .workflow-chevron{transform:rotate(180deg);}
  .workflow-body{padding:0 14px 16px; border-top:1px solid var(--line); padding-top:12px;}

  .form-label-custom{font-size:11.5px; font-weight:700; color:var(--slate); margin-bottom:6px; display:block;}
  .form-textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    font-size:13px;
    font-family:inherit;
    color:var(--ink-text);
    resize:vertical;
  }
  .form-textarea:focus{outline:none; border-color:var(--teal);}
  .form-select-custom{
    width:100%;
    border:1px solid var(--line);
    border-radius:10px;
    padding:9px 12px;
    font-size:13px;
    font-family:inherit;
    color:var(--ink-text);
    background:var(--card);
  }
  .form-select-custom:focus{outline:none; border-color:var(--teal);}
  .btn-save-sm{
    font-size:12px; font-weight:700; color:#fff;
    background:var(--teal); border:none;
    padding:7px 14px; border-radius:8px;
  }
  .btn-save-sm:disabled{opacity:0.7;}
  .btn-outline-add{
    width:100%;
    border:1.5px dashed var(--line);
    background:none;
    border-radius:10px;
    padding:9px;
    font-size:12.5px; font-weight:600;
    color:var(--teal);
  }

  .status-pill-wait{
    display:inline-block; font-size:11px; font-weight:700;
    color:var(--amber); background:var(--amber-soft);
    padding:3px 10px; border-radius:20px; margin-bottom:10px;
  }

  .part-offer-item{
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 0; border-bottom:1px solid var(--line);
  }
  .part-offer-item:last-of-type{border-bottom:none;}
  .part-offer-item input[type="checkbox"]{
    margin-top:3px; width:16px; height:16px;
    accent-color:var(--teal); flex:none;
  }
  .part-name{font-size:13px; font-weight:600;}
  .part-note{font-size:11.5px; color:var(--slate); margin-top:1px;}
  .part-price{font-size:12.5px; font-weight:700; white-space:nowrap;}

  .offer-total-row{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:10px; font-size:13px; font-weight:700;
  }

  .item-row{
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:9px 0; border-bottom:1px solid var(--line);
  }
  .item-row:last-of-type{border-bottom:none;}
  .item-name{font-size:13px; font-weight:600;}
  .item-meta{font-size:11.5px; color:var(--slate); margin-top:1px;}
  .item-subtotal{font-size:12.5px; font-weight:700; white-space:nowrap;}

  .total-row{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:12px; margin-top:6px;
    border-top:2px solid var(--ink-text);
    font-size:14px; font-weight:800;
  }

  .photo-upload-row{display:flex; gap:10px;}
  .photo-upload-box{
    flex:1; aspect-ratio:1/1;
    border:1.5px dashed var(--line);
    border-radius:10px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    color:var(--slate); font-size:10.5px; font-weight:600;
  }
  .photo-upload-box i{font-size:20px; color:#C4CBCE;}

  .save-confirm{font-size:12px; font-weight:700; color:var(--green); display:flex; align-items:center; gap:5px;}

  /* ---------- auth: login & lupa kata sandi ---------- */
  .auth-screen{
    flex:1;
    display:flex;
    flex-direction:column;
    background:var(--paper);
    min-height:100vh;
  }
  .auth-hero{
    background:var(--ink);
    color:#fff;
    padding:48px 20px 32px;
    text-align:center;
  }
  .auth-logo{
    width:56px;height:56px;
    border-radius:16px;
    background:var(--amber);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;
    margin:0 auto 12px;
  }
  .auth-app-name{font-size:19px; font-weight:800;}
  .auth-app-tag{font-size:12px; color:#9FB4BE; margin-top:2px;}

  .auth-body{padding:24px 20px; flex:1;}
  .auth-title{font-size:17px; font-weight:700;}
  .auth-sub{font-size:12.5px; color:var(--slate); margin-top:4px; line-height:1.55;}

  .input-with-icon{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    background:var(--card);
  }
  .input-with-icon:focus-within{border-color:var(--teal);}
  .input-with-icon i{color:var(--slate); font-size:15px;}
  .input-with-icon .form-input{
    border:none; outline:none; flex:1;
    font-size:13.5px; background:transparent; font-family:inherit;
    color:var(--ink-text);
  }
  .input-icon-btn{border:none; background:none; color:var(--slate); font-size:15px; padding:0;}

  .auth-checkbox{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--slate);}
  .auth-checkbox input{accent-color:var(--teal); width:15px; height:15px;}
  .auth-link{font-size:12.5px; font-weight:600; color:var(--teal); text-decoration:none;}

  .auth-footer{text-align:center; font-size:12.5px; color:var(--slate); margin-top:28px;}

  .auth-success-icon{
    width:64px;height:64px;
    border-radius:50%;
    background:var(--green-soft);
    color:var(--green);
    font-size:28px;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 16px;
  }



/* Upload area */
.upload-area {
  border: 2px dashed #cccccc;
  border-radius: 14px;
  padding: 15px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--sur2);
}

.upload-area:hover {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.03);
}

.upload-icon {
  font-size: 32px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.upload-text {
  font-size: 13px;
  color: var(--text-muted);
}

.fileChosen {
  display: block;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  font-size: 13px;
  color: var(--success);
  word-wrap: break-word;
}