/*
 * style.css
 * Stylesheet utama untuk website Jasa Las
 * Berdasarkan file styles.css yang disediakan
 */
:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --primary:#0b5ed7;
  --accent:#ff8c00;
  --muted:#6b7280;
  --radius:10px;
  --shadow: 0 8px 24px rgba(11,94,215,0.06);
  --container:1440px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
/* Biarkan tinggi halaman mengikuti panjang konten */
html,body{
  min-height:100%;
  width:100%;
}
body{
  margin:0;
  background: linear-gradient(180deg,#f8fbff,#f5f7fb);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* container */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1rem;
}

/* Konsistensi lebar konten antar view */
.content-narrow { max-width: 1080px; margin: 0 auto; }
.content-stack > * + * { margin-top: 1rem; }
.order-status-item + .order-status-item { margin-top: 1rem; }

/* Admin Chat layout: only chat-box scrolls */
.admin-main .admin-chat-layout {
  display: flex;
  gap: 1rem;
  height: 60vh;
  overflow: hidden;
}
.admin-main .admin-chat-layout .user-list {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.admin-main .admin-chat-layout .chat-area {
  flex: 3;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.admin-main .admin-chat-layout .chat-box {
  flex: 1;
  padding: 1rem;
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  background-color: #f8f9fa;
}
.admin-main .admin-chat-layout .chat-input {
  border-top: 1px solid #e0e0e0;
  padding: 0.75rem;
  background-color: #fff;
}
.admin-main .admin-chat-layout .chat-box::-webkit-scrollbar { width: 8px; }
.admin-main .admin-chat-layout .chat-box::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 10px; }
.admin-main .admin-chat-layout .chat-box::-webkit-scrollbar-thumb:hover { background-color: #999; }/* header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(15,23,42,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  height:72px;
}
.brand{ font-weight:800; color:var(--primary); text-decoration:none; font-size:1.2rem }
.brand span{ color:var(--muted); font-weight:600; margin-left:4px }
.welcome-user { color: var(--muted); font-size: 14px; margin-right: 1rem; }

/* Navigasi Utama (User) */
.main-nav { display: flex; gap: 0.5rem; }
.nav-link {
    padding: 0.5rem 0.8rem;
    color: var(--muted);
    font-weight: 600;
    border-radius: 8px;
}
.nav-link.active, .nav-link:hover {
    color: var(--primary);
    background-color: rgba(11,94,215,0.06);
}

/* Tombol */
.btn{ padding:0.5rem 0.9rem; border-radius:8px; border:0; cursor:pointer; font-weight:700; text-decoration: none; display: inline-block; text-align: center; }
.btn.small{ padding:0.45rem 0.7rem; font-size:14px }
.btn.primary{ background:var(--primary); color:white; }
.btn.primary:hover{ background: #0a55c0; }
.btn.ghost{ background:transparent; border:1px solid rgba(15,23,42,0.06); color: var(--muted); }
.btn.ghost:hover{ background: rgba(15,23,42,0.04); }
.btn.full-width { width: 100%; }

/* Admin action buttons (uniform size) */
.btn.order-btn {
  width: 127.44px;
  height: 31.2px;
  padding: 0; /* ensure fixed height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Soft red reject button */
.btn.reject {
  background: #fee2e2; /* pale red */
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.btn.reject:hover {
  background: #fecaca;
}

.top-actions{ display:flex; gap:0.5rem; align-items:center }
.section-title { margin-top: 2rem; }
.back-link { display: inline-block; margin-top: 1rem; color: var(--muted); font-weight: 600; }

/* hero (Landing Page) */
.hero{ display:flex; justify-content:space-between; align-items:center; padding:2rem 0 }
.hero-left h1{ margin:0; font-size:1.75rem }
.hero-left p{ color:var(--muted) }
.hero-right .btn{ padding:0.6rem 1rem }
.profile-section { background: var(--card); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); margin: 2rem 0; }
.profile-img { width: 100%; border-radius: 8px; margin-bottom: 1rem; height: 400px; object-fit: cover; }
.profile-info h2 { margin-top: 0; }
.description-scroll {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 0.75rem;
  line-height: 1.7;
  color: #0f172a;
}
.thumb-wrapper {
  width: 100px;
  height: 70px;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 12px;
  overflow: hidden;
}
.thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-holder {
  width: 100px;
  height: 70px;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 12px;
  overflow: hidden;
}
.img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.description-scroll {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 0.5rem;
  line-height: 1.6;
  color: #0f172a;
}
.card-like { background: var(--card); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); border: 1px solid rgba(15,23,42,0.04); }

/* search bar */
.search-bar-wrap { margin: 1.5rem 0; }
.search-wrap{ display:flex; gap:0.5rem; align-items:center }
.search-wrap input[type="search"]{
  flex: 1;
  min-width: 200px;
  padding:0.55rem 0.75rem;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.06);
  outline:none;
}
.search-wrap select{
  padding:0.5rem;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.06);
}

/* grid listings */
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1rem; padding-bottom: 2rem; }
@media (max-width:1000px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){ .grid{ grid-template-columns:1fr } .search-wrap input{ width:180px } }

.card{
  background:var(--card);
  border-radius:12px;
  padding:0.9rem;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,0.04);
  display:flex;
  flex-direction: column;
  gap:0.8rem;
}
.card img{ width:100%; height:180px; object-fit:cover; border-radius:8px; flex-shrink:0 }
.card .info{ flex:1; display: flex; flex-direction: column; }
.card .title{ font-weight:800; margin-bottom:0.25rem }
.card .meta{ color:var(--muted); font-size:14px; margin-bottom:0.5rem; flex-grow: 1; }
.card .price{ font-weight:900; color:var(--primary); font-size: 13px; }
.card .price span { font-weight: 900; color: var(--primary); font-size: 14px; }
.card .card-actions{ display:flex; gap:0.4rem; margin-top:0.6rem }

/* grid small (Landing Page) */
.grid.small-grid .card { flex-direction: column; }
.grid.small-grid .card img{ width:100%; height:160px; border-radius:8px }
.grid.small-grid{ grid-template-columns: repeat(4,1fr) }
@media (max-width:1000px){ .grid.small-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){ .grid.small-grid{ grid-template-columns:1fr } }


/* toast Notifikasi */
.toast{
  padding:0.6rem 0.9rem; border-radius:8px; margin-bottom: 1rem;
}
.toast.error { background: #fee2e2; color: #b91c1c; }
.toast.success { background: #dcfce7; color: #166534; }

/* footer */
footer{ padding:2rem 0; text-align:center; color:var(--muted); border-top: 1px solid rgba(15,23,42,0.04); margin-top: 2rem; }

/* Halaman Auth (Login/Register) */
.auth-page{ display:flex; gap:2rem; align-items:center; justify-content:center; min-height:90vh; padding:2rem }
.auth-card{ background:#fff; padding:1.5rem; border-radius:12px; width:400px; box-shadow: 0 8px 24px rgba(2,6,23,0.06); }
.auth-card h3{ margin-top:0 }
.form-row{ margin-bottom:0.8rem; display:flex; flex-direction:column; gap:0.25rem }
.form-row label { font-weight: 600; font-size: 14px; }
.price-row { display:flex; flex-direction:column; gap:0.25rem; }
input, select, textarea { 
    width: 100%;
    padding:0.55rem 0.7rem; 
    border-radius:8px; 
    border:1px solid rgba(15,23,42,0.1); 
    font-family: inherit;
    font-size: 1rem;
}
input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(11,94,215,0.2); }
textarea { resize: vertical; }

.muted{ color:var(--muted); font-size:14px }
.link-like{ background:transparent; border:0; color:var(--primary); cursor:pointer; font-weight:700; padding:0 }
.center{ text-align:center }

/* Halaman Admin */
.admin-wrap{ display:grid; grid-template-columns:220px 1fr; gap:1.5rem; padding:1.2rem 0 }
.admin-side{ background:#fff; padding:0.8rem; border-radius:12px; box-shadow: 0 6px 18px rgba(2,6,23,0.05); align-self: flex-start; }
.admin-side button{ display:block; width:100%; text-align:left; padding:0.6rem; border:0; background:transparent; font-weight:700; cursor:pointer; border-radius:8px; color: var(--muted); }
.admin-side button.active, .admin-side button:hover { background: rgba(11,94,215,0.06); color:var(--primary) }
.admin-main{ background:#fff; padding:1rem; border-radius:12px; box-shadow: 0 6px 18px rgba(2,6,23,0.05) }

table{ width:100%; border-collapse:collapse; margin-top: 1rem; }
th,td{ padding:0.8rem; text-align:left; border-bottom:1px solid rgba(15,23,42,0.04); vertical-align: middle; }
th { font-size: 14px; color: var(--muted); font-weight: 600; }
.text-center { text-align: center !important; }
.small{ font-size:13px }
.topbar{ display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:0.8rem; flex-wrap: wrap; }
.subtab-group{
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
  padding:0.35rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.05);
  background:#f1f5f9;
}
.subtab-group .btn.ghost.small{
  border-radius:999px;
  padding:0.35rem 1rem;
  border:1px solid transparent;
  color:var(--muted);
  background:transparent;
  transition:all .2s ease;
}
.subtab-group .btn.ghost.small:hover{
  color:var(--primary);
  border-color:rgba(11,94,215,0.25);
  background:rgba(11,94,215,0.05);
}
.subtab-group .btn.ghost.small.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 6px 15px rgba(11,94,215,0.25);
}

/* Detail Produk & Kalkulator */
.detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
.detail-form h3 { margin-top: 0; }
.price-calculation { background: var(--bg); padding: 1rem; border-radius: 8px; margin: 1rem 0; }
.price-calculation h2 { margin: 0; color: var(--primary); }
.price-calculation p { margin: 0; }
.detail-preview img { width: 100%; border-radius: 8px; }
.detail-preview .preview-info { padding: 0.5rem 0; font-weight: 600; color: var(--muted); }
.detail-preview .description { margin-top: 1rem; }
.description p.price { font-size: 1.2rem; font-weight: 800; color: var(--primary); }
.description p.price span { font-weight: 400; color: var(--muted); font-size: 1rem; }

/* Halaman Profil User */
.profile-layout { display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; }
.profile-form h3 { margin-top: 0; }
.profile-orders h3 { margin-top: 0; }
.order-status-item { border: 1px solid rgba(15,23,42,0.06); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.order-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.order-jasa { font-weight: 800; font-size: 1.1rem; display: block; }
.order-date { font-size: 13px; color: var(--muted); }
.order-status {
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background-color: var(--bg);
    color: var(--muted);
}
.order-status.menunggu-verifikasi { background: #fef9c3; color: #a16207; }
.order-status.dalam-proses { background: #cffafe; color: #0891b2; }
.order-status.selesai { background: #dcfce7; color: #166534; }
.order-status.ditolak { background: #fee2e2; color: #b91c1c; }
.order-total { font-weight: 700; }

/* Progress Bar */
.progress-bar-container { width: 100%; background-color: #e9ecef; border-radius: 99px; height: 10px; margin: 0.5rem 0; overflow: hidden; }
.progress-bar-fill { height: 100%; width: 0%; background-color: var(--primary); border-radius: 99px; transition: width 0.3s ease; }
.success-text { color: #166534; font-weight: 600; }
.estimasi-trigger { font-size: 0.9rem; margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.estimasi-calendar-container { display: flex; flex-wrap: wrap; gap: 1rem; }
.estimasi-calendar-month { flex: 1 1 220px; border: 1px solid rgba(15,23,42,0.08); border-radius: 10px; padding: 0.75rem; background: #fff; box-shadow: 0 8px 20px rgba(15,23,42,0.06); }
.estimasi-calendar-header { text-align: center; font-weight: 700; margin-bottom: 0.5rem; color: #0b5ed7; }
.estimasi-calendar-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.estimasi-calendar-table th,
.estimasi-calendar-table td { text-align: center; padding: 0.35rem; }
.estimasi-calendar-table th { font-weight: 600; color: #475569; }
.estimasi-calendar-table td { border-radius: 6px; color: #1f2937; height: 52px; position: relative; }
.estimasi-calendar-table td .day-label {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all .2s ease;
  position: relative;
  z-index: 2;
}
.estimasi-calendar-table td.is-empty { background: transparent; color: #cbd5f5; }
.estimasi-calendar-table td.is-sunday .day-label { color: #dc2626; font-weight: 600; }
.estimasi-calendar-table td.in-range .day-label {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: rgba(11,94,215,0.08);
  font-weight: 700;
}
.estimasi-calendar-table td.range-start .day-label,
.estimasi-calendar-table td.range-end .day-label {
  background: var(--primary);
  color: #fff;
}
.estimasi-calendar-table td.libur-range .day-label {
  border: 1px dashed #94a3b8;
  color: #94a3b8;
  font-weight: 600;
  opacity: 0.8;
}
.estimasi-calendar-table td .range-line-bar {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 10px;
  transform: translateY(-50%);
  background: #16a34a;
  opacity: 0.55;
  border-radius: 999px;
  z-index: 1;
}
.estimasi-calendar-table td .range-line-bar.line-start { left: 50%; }
.estimasi-calendar-table td .range-line-bar.line-end { right: 50%; }
.estimasi-calendar-table td .range-line-bar.line-single { left: 25%; right: 25%; }
.estimasi-calendar-table td .range-line-bar.line-holiday {
  background: #65a30d;
  opacity: 0.35;
}

/* Admin produk table */
.table-jasa {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 14px;
}
.table-jasa thead th {
  text-align: center;
  padding: 12px 10px;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  border-bottom: 2px solid #e2e8f0;
}
.table-jasa tbody td {
  padding: 12px 10px;
  vertical-align: top;
  border-top: 1px solid #e2e8f0;
}
.table-jasa input[type="text"],
.table-jasa input[type="number"],
.table-jasa textarea,
.table-jasa select {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 14px;
}
.table-jasa textarea {
  min-height: 90px;
}
.desc-cell .desc-box {
  white-space: normal;
  line-height: 1.5;
  color: #0f172a;
  margin: 0;
  padding: 0;
}
.table-jasa .img-holder {
  background: #f8fafc;
  color: #94a3b8;
  font-size: 12px;
  overflow: hidden;
}
.table-jasa .img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.desc-content {
  color: #0f172a;
  line-height: 1.5;
  max-height: 48px;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.desc-content.expanded {
  max-height: none;
}
.toggle-desc {
  background: none;
  border: none;
  color: #2563eb;
  cursor: pointer;
  padding: 0;
  margin-top: 6px;
  font-size: 13px;
  text-decoration: underline;
}
.table-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.table-actions form {
  margin: 0;
}
.rincian-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: decimal;
  font-size: 14px;
  color: #0f172a;
}
.rincian-list li {
  margin-bottom: 4px;
  line-height: 1.4;
}
.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}
.admin-table thead th{
  text-align:center;
  padding:12px 10px;
  background:#f8fafc;
  color:#475569;
  font-weight:600;
  border-bottom:2px solid #e2e8f0;
}
.admin-table tbody td{
  padding:12px 10px;
  vertical-align:middle;
  border-top:1px solid #e2e8f0;
}
.admin-table tbody tr:nth-child(even){
  background:#fdfdfd;
}
.status-chip{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.status-chip.active{
  background:#d1fae5;
  color:#065f46;
}
.status-chip.archived{
  background:#e2e8f0;
  color:#475569;
}
.btn-table {
  border: none;
  border-radius:8px;
  padding: 6px 16px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
}
.btn-table.edit {
  background: #a7ff4d;
  color: #0f172a;
}
.btn-table.delete {
  background: #d91515;
}
.btn-table.restore {
  background: #2563eb;
}

/* Halaman Checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.checkout-invoice h3 { margin-top: 0; }
.line { display: flex; justify-content: space-between; padding: 0.5rem 0; }
.total-line { font-weight: 700; font-size: 1.1rem; border-top: 1px solid rgba(15,23,42,0.06); }
.dp-line { color: var(--primary); font-size: 1.2rem; }
.checkout-payment h3 { margin-top: 0; }
.checkout-payment ul { padding-left: 20px; }

/* Placeholder */
.chat-placeholder { text-align: center; padding: 3rem; }

/* Responsif */
@media (max-width: 900px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .grid.small-grid { grid-template-columns: repeat(2, 1fr); }
    /* Offcanvas sidebar for Admin */
    .admin-wrap { grid-template-columns: 1fr; position: relative; }
    .admin-side {
      position: fixed;
      top: 72px; /* header height */
      left: 0;
      width: 260px;
      height: calc(100vh - 72px);
      background: #fff;
      border-right: 1px solid rgba(15,23,42,0.06);
      box-shadow: 0 12px 30px rgba(2,6,23,0.15);
      overflow-y: auto;
      transform: translateX(-100%);
      transition: transform .28s ease;
      z-index: 1100;
      display: block;
    }
    .admin-side.open { transform: translateX(0); }
    .admin-backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,.35);
      z-index: 1090; display: none;
    }
    .admin-backdrop.show { display: block; }
    .admin-menu-toggle { display: inline-flex; align-items:center; gap:6px; }
    .admin-menu-close { display: inline-flex; margin-bottom: .5rem; }
    .detail-layout { grid-template-columns: 1fr; }
    .profile-layout { grid-template-columns: 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
    .grid.small-grid { grid-template-columns: 1fr; }
    .hero { flex-direction: column; text-align: center; }
    .header-inner { height: auto; padding: 1rem 0; flex-direction: column; }
    .main-nav { order: 1; }
    .top-actions { margin-top: 1rem; }
    .topbar { flex-direction: column; align-items: stretch; }
}
@media (min-width: 901px) {
  .admin-menu-toggle, .admin-backdrop, .admin-menu-close { display: none !important; }
}
@media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
    .grid.small-grid { grid-template-columns: 1fr; }
    .hero { flex-direction: column; text-align: center; }
    .header-inner { height: auto; padding: 1rem 0; flex-direction: column; }
    .main-nav { order: 1; }
    .top-actions { margin-top: 1rem; }
    .topbar { flex-direction: column; align-items: stretch; }
}

/* Floating Action Button for Chat */
.chat-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s;
}

.chat-fab:hover {
    background-color: #0056b3;
}

.desc-content {
  display: none;
}
.desc-cell {
  width: 346px;
  max-width: 346px;
  vertical-align: top;
}
.desc-cell textarea {
  width: 100%;
}
.desc-cell .desc-box {
  line-height: 1.5;
  color: #0f172a;
  margin: 0;
  padding: 0;
}
.desc-cell .desc-box.long {
  max-height: 100px;
  overflow-y: auto;
  padding-right: 4px;
}