/* Komponen halaman baru (Ringkasan, daftar, inventory, dll) — klon gaya jlaura.paramartha.co.id */
:root{--ink:#1a1f4b; --soft:#77758d; --paper:#fdf5f3; --card:#fff; --line:#e9dddf; --hard:#cfc0c4; --accent:#d9327c; --accent-soft:#fdecf3;
  --teal:#0e7e86; --teal-soft:#e4f4f4; --green:#1b7a56; --amber:#a56b16; --danger:#be2b2b;}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{margin:0; background:var(--paper); color:var(--ink); font:13px/1.6 'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased;}
button,input,select,textarea{font:inherit;} button{cursor:pointer;}
h1,h2,h3,p{margin:0;}
h1{font-size:30px; font-weight:800; letter-spacing:-1.1px; line-height:1.3;}
h2{font-size:15px; font-weight:700; letter-spacing:-.25px;}
h3{font-size:13px; font-weight:700;}
b,strong{font-weight:600;}
a{color:inherit;}
.page{max-width:1500px; margin:0 auto; padding:34px 37px 30px;}
.page-heading{display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px;}
.page-heading .sub{color:var(--soft); margin-top:9px; font-size:11px;}
.eyebrow{font-size:8px; font-weight:700; letter-spacing:1.9px; color:var(--accent); margin-bottom:8px; text-transform:uppercase;}
.heading-actions{display:flex; gap:9px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:10px 14px; border-radius:7px; border:1px solid transparent; font-size:11px; font-weight:600; white-space:nowrap; text-decoration:none; transition:background .16s,border-color .16s;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 3px 7px #d9327c12;} .btn-primary:hover{background:#bf276a;}
.btn-secondary{background:#fff; color:var(--ink); border-color:var(--line);} .btn-secondary:hover{background:#fff9fb; border-color:#dca5bb;}
.btn-ghost{background:none; color:var(--accent);} .btn-ghost:hover{background:var(--accent-soft);}
.btn-danger{background:#fff0ee; color:var(--danger); border-color:#f5ceca;}
.btn-sm{min-height:30px; padding:6px 10px; font-size:10.5px;}
.text-link{display:inline-flex; align-items:center; gap:5px; color:var(--accent); background:none; border:0; padding:0; font-size:10px; font-weight:600; text-decoration:none;}
.text-link:hover{text-decoration:underline;}

.hero{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:27px; padding:34px 38px; min-height:200px;
  border:1px solid #f0dcdf; border-radius:12px; background:radial-gradient(ellipse at 85% 30%,#f9e3e7 0,transparent 55%),linear-gradient(120deg,#fbeceb,#f8e4e6);}
.hero-tag{display:flex; align-items:center; gap:6px; font-size:8px; font-weight:600; letter-spacing:1.5px; color:#a36177;}
.hero h2{margin-top:10px; font-size:27px; line-height:1.4; letter-spacing:-.9px; font-weight:700;}
.hero p{margin-top:9px; color:#8d7982; font-size:11px; line-height:1.9; max-width:380px;}
.hero .hero-cta{display:flex; align-items:center; gap:9px; margin-top:15px; color:#a93568; font-size:10px; font-weight:700; text-decoration:none;}
.hero-art{flex-shrink:0; width:260px; height:170px; position:relative; margin-right:30px;}
.swatch{position:absolute; border-radius:6px; border:1px solid #ead7d6; box-shadow:0 6px 18px #765a5414;}
.swatch.s1{width:120px; height:140px; left:0; top:12px; transform:rotate(-7deg); background:repeating-linear-gradient(0deg,#f6dfe3 0 10px,#fbeef0 10px 20px),#fbeef0; background-blend-mode:multiply;}
.swatch.s2{width:150px; height:150px; left:70px; top:0; background:#fffaf8; display:grid; place-items:center; color:#d996ae;}
.swatch.s3{width:96px; height:120px; right:0; top:30px; transform:rotate(6deg); background:repeating-linear-gradient(45deg,#e4f4f4 0 8px,#f2fafa 8px 16px);}
.sticker{position:absolute; bottom:4px; right:6px; display:flex; align-items:center; gap:6px; padding:8px 11px; border:1px solid #e9d8d3; border-radius:6px; background:#fff9f7; color:#7b756c; font-size:9px; transform:rotate(-5deg); box-shadow:0 3px 8px #765a5410;}
.sticker svg{color:var(--teal);}

.stat-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:27px;}
.stat-grid.five{grid-template-columns:repeat(5,minmax(0,1fr));}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:9px; padding:20px;}
.stat-top{display:flex; justify-content:space-between; align-items:center; gap:5px;}
.stat-top>span:first-child{font-size:11px; font-weight:500; color:#7d788b;}
.stat-icon{width:31px; height:31px; border-radius:8px; display:grid; place-items:center; flex-shrink:0;}
.stat-icon.pink{background:#fdebf3; color:#c9578a;} .stat-icon.teal{background:#e6f4f2; color:#3f8f84;} .stat-icon.amber{background:#fbf1df; color:#b38a3c;} .stat-icon.violet{background:#efedfb; color:#7d74c2;}
.stat-card>strong{display:block; margin:10px 0 7px; font-size:24px; font-weight:700; letter-spacing:-.7px; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis;}
.stat-card>small{font-size:9.5px; color:#a19aa7;}
.good{color:var(--green);} .bad{color:var(--danger);} .warn{color:var(--amber);}

.grid-2{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:20px; align-items:start;}
.stack{display:flex; flex-direction:column; gap:20px;}
.panel{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; min-width:0;}
.panel-heading{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 22px 17px; border-bottom:1px solid #f3ecee;}
.panel-heading h2{display:flex; align-items:center; gap:7px; font-size:13px;}
.panel-heading p{margin-top:5px; color:#9b919e; font-size:10px;}
.panel-body{padding:18px 22px;}
.toolbar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; padding:15px 22px; border-bottom:1px solid #f2e9ed;}
.toolbar input,.toolbar select{min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:12px; color:var(--ink); outline:none;}
.toolbar input:focus,.toolbar select:focus{border-color:var(--accent); box-shadow:0 0 0 3px #d9327c0d;}
.search{min-width:240px;}
.seg{display:inline-flex; background:#f7f0f1; border-radius:8px; padding:3px; gap:2px;}
.seg button{border:0; background:none; padding:7px 12px; border-radius:6px; font-size:11px; font-weight:600; color:#8d7f91;}
.seg button.on{background:#fff; color:var(--accent); box-shadow:0 1px 3px #1a1f4b12;}

.table-scroll{width:100%; overflow-x:auto; overscroll-behavior-x:contain;}
table{width:100%; border-collapse:collapse; font-size:11px;}
th{text-align:left; color:#a18e9d; white-space:nowrap; background:#fdfafa; border-bottom:1px solid #f0e5ea; padding:12px 18px; font-size:9.5px; font-weight:500;}
td{vertical-align:middle; border-bottom:1px solid #f3ecef; padding:14px 18px;}
tbody tr:last-child td{border-bottom:0;}
tbody tr.click{cursor:pointer;} tbody tr.click:hover td{background:#fffafb;}
td b{font-size:11px;} td small{display:block; margin-top:3px; color:#a796a4; font-size:9.5px;}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
tfoot td{font-weight:700; background:#fdfafa; border-top:1px solid #f0e5ea;}
.table-name{color:var(--ink); font-weight:600; text-decoration:none;} .table-name:hover{color:var(--accent); text-decoration:underline;}
.row-actions{display:flex; gap:4px; justify-content:flex-end;}
.icon-btn{width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:6px; background:none; color:#958aa0;}
.icon-btn:hover{background:#f7edf0; color:var(--accent);}

.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:5px; font-size:10px; font-weight:600; line-height:1.5; white-space:nowrap;}
.badge-neutral{background:#f4f1f4; color:#8d7f91;} .badge-pink{background:#fdebf3; color:#be4e80;} .badge-teal{background:#eaf5f3; color:#49877c;}
.badge-green{background:#edf6ed; color:#4f7f53;} .badge-amber{background:#fbf1df; color:#a1844b;} .badge-red{background:#fff0ee; color:#b5403f;}
.status-dot{width:5px; height:5px; border-radius:50%; background:currentColor;}

.empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:38px 20px;}
.empty-icon{width:63px; height:63px; border-radius:50%; background:#fbf1f3; color:#c299aa; display:grid; place-items:center; margin-bottom:15px;}
.empty h3{font-size:13px; font-weight:600;} .empty p{max-width:340px; margin-top:7px; color:#9b919e; font-size:10.5px; line-height:1.9;}
.empty .btn{margin-top:18px;}

.steps{display:flex; flex-direction:column;}
.step-item{display:flex; align-items:center; gap:12px; padding:13px 20px; border-bottom:1px solid #f5eef0; text-decoration:none; color:var(--ink);}
.step-item:last-child{border-bottom:0;} .step-item:hover{background:#fffafb;}
.step-item .si-icon{width:30px; height:30px; border-radius:8px; background:#fdebf3; color:#c9578a; display:grid; place-items:center; flex-shrink:0;}
.step-item .si-main{flex:1; min-width:0;} .step-item b{display:block; font-size:11px;} .step-item small{color:#a796a4; font-size:9.5px;}
.feed-item{display:flex; gap:11px; padding:12px 20px; border-bottom:1px solid #f5eef0;}
.feed-item:last-child{border-bottom:0;}
.feed-dot{width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; background:#e2b5c7;}
.feed-item p{font-size:11px; line-height:1.6;} .feed-item small{color:#a796a4; font-size:9.5px;}
.progress{height:6px; border-radius:99px; background:#f3e9ec; overflow:hidden;}
.progress>span{display:block; height:100%; background:linear-gradient(90deg,#e46b9d,#d9327c); border-radius:99px;}

.inv-card{background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:16px; overflow:hidden;}
.inv-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid #f3ecee;}
.inv-head h3{font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.inv-meta{display:flex; gap:18px; flex-wrap:wrap; font-size:10.5px; color:var(--soft);}
.inv-meta b{color:var(--ink); font-size:12px;}
.inv-card td,.inv-card th{padding:10px 14px;}
.qty-zero{color:#cbbec6;} .qty-low{color:var(--amber); font-weight:700;}
.sub-qty{display:block; font-size:9px; color:#a796a4; font-weight:500;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.page-footer{display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:35px; padding:18px 0 4px; border-top:1px solid var(--line); color:#b19ca7; font-size:9.5px;}
.skeleton{background:linear-gradient(90deg,#f6eef0 25%,#fbf6f7 50%,#f6eef0 75%); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:6px; height:14px;}
@keyframes sk{to{background-position:-200% 0;}}

@media (max-width:1200px){ .page{padding:28px 25px;} .stat-grid,.stat-grid.five{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;} .hero-art{display:none;} }
@media (max-width:1000px){ .grid-2{grid-template-columns:1fr;} .stat-grid,.stat-grid.five{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){
  .page{padding:22px 16px 14px;} h1{font-size:24px;}
  .page-heading{flex-direction:column; align-items:flex-start; gap:15px; margin-bottom:22px;}
  .hero{padding:24px 20px; min-height:0;} .hero h2{font-size:20px;}
  .stat-card{padding:14px;} .stat-card>strong{font-size:19px;}
  .panel-heading,.toolbar,.panel-body{padding-left:15px; padding-right:15px;}
  th,td{padding:11px 12px;} .search{min-width:0; width:100%;}
  .form-grid{grid-template-columns:1fr;}
}