:root{
  --ink:#1C232E;
  --paper:#F6F3EC;
  --paper-2:#EFEADD;
  --amber:#E2A63B;
  --clay:#BD4F2E;
  --sage:#6E8B6C;
  --slate:#5B6472;
  --line:#DCD5C4;
  --card:#FFFDF8;
  --white:#ffffff;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  min-height:100vh;
}
.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Space Grotesk',sans-serif;}

/* ---------- Layout ---------- */
.app{max-width:1280px;margin:0 auto;padding:24px 20px 60px;}
.app-narrow{max-width:640px;margin:0 auto;padding:24px 20px 60px;}
.topbar{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:22px;padding-bottom:18px;border-bottom:2px solid var(--ink);
}
.brand-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--slate);text-transform:uppercase;margin:0 0 4px;}
.brand-title{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;margin:0;letter-spacing:-.01em;}
.brand-sub{font-size:13px;color:var(--slate);margin:4px 0 0;}
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap;}

.btn{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;
  border:2px solid var(--ink);background:var(--white);color:var(--ink);
  padding:10px 16px;border-radius:3px;cursor:pointer;transition:transform .12s ease, background .12s ease;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:#2A3444;}
.btn-ghost{border-color:var(--line);color:var(--slate);}
.btn-danger{border-color:var(--clay);color:var(--clay);background:transparent;}
.btn-danger:hover{background:var(--clay);color:var(--white);}
.btn-sm{padding:7px 12px;font-size:12.5px;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-block{width:100%;justify-content:center;}

.controls-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center;}
.search-wrap{position:relative;flex:1;min-width:220px;}
.search-wrap input{
  width:100%;padding:10px 14px 10px 36px;border:2px solid var(--ink);border-radius:3px;
  font-family:'Inter',sans-serif;font-size:14px;background:var(--white);color:var(--ink);
}
.search-wrap input:focus{outline:2px solid var(--amber);outline-offset:1px;}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--slate);font-size:14px;pointer-events:none;}
select.filter-select{
  padding:10px 12px;border:2px solid var(--ink);border-radius:3px;background:var(--white);
  font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink);cursor:pointer;
}
select.filter-select:focus{outline:2px solid var(--amber);outline-offset:1px;}

.stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.stat-chip{
  border:1.5px solid var(--line);background:var(--card);border-radius:3px;padding:8px 14px;
  font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:8px;
}
.stat-chip b{font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--ink);}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

.main-grid{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:20px;align-items:start;}
@media (max-width:860px){.main-grid{grid-template-columns:1fr;}}

/* ---------- Ticket list ---------- */
.list-panel{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 220px);overflow-y:auto;padding-right:4px;}
.empty-note{border:1.5px dashed var(--line);border-radius:4px;padding:26px 16px;text-align:center;color:var(--slate);font-size:13.5px;}

.ticket{
  position:relative;background:var(--card);border:1.5px solid var(--ink);border-radius:2px;
  padding:14px 14px 12px;cursor:pointer;transition:transform .1s ease, box-shadow .1s ease;
  box-shadow:2px 2px 0 rgba(28,35,46,0.08);
}
.ticket::before{
  content:"";position:absolute;top:-6px;left:16px;right:16px;height:6px;
  background:repeating-linear-gradient(90deg, var(--paper) 0 6px, transparent 6px 12px);
  border-top:1.5px dashed var(--line);
}
.ticket:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(28,35,46,0.12);}
.ticket.active{border-color:var(--amber);box-shadow:4px 4px 0 rgba(226,166,59,0.35);}
.ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.ticket-code{font-size:10.5px;color:var(--slate);letter-spacing:.06em;}
.ticket-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;margin:3px 0 2px;}
.ticket-div{font-size:12px;color:var(--slate);}
.ticket-laptop{font-size:12.5px;color:var(--ink);margin-top:6px;}
.ticket-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.ticket-date{font-size:11px;color:var(--slate);}

.stamp{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;border:2px solid; border-radius:3px;padding:3px 8px;
  transform:rotate(-6deg);display:inline-block;
}
.stamp-baik{color:var(--sage);border-color:var(--sage);}
.stamp-bermasalah{color:var(--amber);border-color:var(--amber);}
.stamp-rusak{color:var(--clay);border-color:var(--clay);}
.stamp-diperbaiki{color:#3E6FA8;border-color:#3E6FA8;}
.stamp-selesai{color:var(--slate);border-color:var(--slate);}

/* ---------- Detail panel ---------- */
.detail-panel{background:var(--card);border:1.5px solid var(--ink);border-radius:2px;min-height:420px;box-shadow:3px 3px 0 rgba(28,35,46,0.08);}
.detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:420px;color:var(--slate);gap:8px;text-align:center;padding:20px;}
.detail-empty .big{font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--ink);}

.detail-header{padding:20px 22px;border-bottom:1.5px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.detail-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.detail-name{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;margin:0;}
.detail-meta{font-size:13px;color:var(--slate);margin-top:4px;}
.detail-actions{display:flex;gap:8px;}

.tabs{display:flex;gap:2px;padding:0 22px;border-bottom:1.5px solid var(--line);background:var(--paper-2);}
.tab-btn{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--slate);
  padding:11px 14px;border:none;background:transparent;cursor:pointer;border-bottom:3px solid transparent;
}
.tab-btn.active{color:var(--ink);border-bottom-color:var(--amber);}
.tab-content{padding:20px 22px;}

.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:560px){.info-grid{grid-template-columns:1fr;}}
.info-item label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:4px;}
.info-item div{font-size:14px;color:var(--ink);}
.info-item.wide{grid-column:1/-1;}

.complaint-box{background:var(--paper-2);border-left:3px solid var(--amber);padding:12px 14px;border-radius:2px;font-size:13.5px;margin-top:16px;}
.complaint-box label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:5px;}

.history-item{border:1px solid var(--line);border-radius:3px;padding:12px 14px;margin-bottom:10px;position:relative;}
.history-item .h-date{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--slate);}
.history-item .h-desc{font-size:13.5px;margin:5px 0 4px;}
.history-item .h-meta{font-size:11.5px;color:var(--slate);}
.history-item .h-del{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--clay);cursor:pointer;font-size:12px;}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.photo-thumb{position:relative;border:1.5px solid var(--line);border-radius:3px;overflow:hidden;aspect-ratio:1;cursor:pointer;background:var(--paper-2);}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-thumb .rm{position:absolute;top:4px;right:4px;background:rgba(28,35,46,.75);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer;line-height:1;}
.photo-add{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);border-radius:3px;aspect-ratio:1;cursor:pointer;color:var(--slate);font-size:12px;text-align:center;flex-direction:column;gap:4px;}
.photo-add:hover{border-color:var(--ink);color:var(--ink);}

/* ---------- Modal / form ---------- */
.overlay{position:fixed;inset:0;background:rgba(28,35,46,0.55);display:flex;align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto;z-index:50;}
.modal{background:var(--card);border-radius:4px;max-width:640px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.25);}
.modal-header{padding:18px 22px;border-bottom:1.5px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.modal-header h3{font-family:'Space Grotesk',sans-serif;margin:0;font-size:18px;}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--slate);}
.modal-body{padding:20px 22px;max-height:70vh;overflow-y:auto;}
.modal-footer{padding:16px 22px;border-top:1.5px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.field input, .field select, .field textarea{
  width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:3px;font-family:'Inter',sans-serif;
  font-size:13.5px;background:var(--white);color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--ink);}
.field textarea{resize:vertical;min-height:64px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:480px){.field-row{grid-template-columns:1fr;}}
.field-hint{font-size:11px;color:var(--slate);margin-top:3px;}
.required-mark{color:var(--clay);}

.fieldset-title{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line);}
.fieldset-title:first-child{margin-top:0;padding-top:0;border-top:none;}

.form-card{background:var(--card);border:1.5px solid var(--ink);border-radius:2px;box-shadow:3px 3px 0 rgba(28,35,46,0.08);padding:22px;}

.toast{
  position:fixed;bottom:20px;right:20px;background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:4px;font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.3);
  z-index:100;display:flex;align-items:center;gap:10px;transform:translateY(20px);opacity:0;transition:all .25s ease;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.err{background:var(--clay);}

.loading-note{text-align:center;color:var(--slate);padding:40px;font-size:13.5px;}
.error-note{text-align:center;color:var(--clay);font-size:13px;margin-top:8px;}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;}

.success-box{text-align:center;padding:40px 20px;}
.success-box .ticket-code-big{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;background:var(--paper-2);border:1.5px dashed var(--line);border-radius:4px;padding:14px 18px;display:inline-block;margin:14px 0;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}