/* styles.css — base + shell + komponen, template "penjualan". Token (variabel) di-@import dari tokens/. Font & ikon di-@import dari assets/. File ini hanya pakai var(--...). Halaman baru cukup me-link: css/styles.css. */ @import url('tokens/colors.css'); @import url('tokens/typography.css'); @import url('tokens/spacing.css'); @import url('../assets/fonts/inter.css'); @import url('../assets/icons/phosphor.css'); /* ============ BASE — SENGAJA TIDAK GLOBAL ============ Tidak ada aturan untuk elemen html, body, bintang (universal), atau a tanpa scope, supaya file ini AMAN di-drop ke project yang sudah punya CSS sendiri (Bootstrap, Tailwind, dll). - .dk-root : dipasang di (atau div pembungkus) HALAMAN DASHKIT saja. Kalau dashboard cuma sebagian halaman, pasang di div pembungkusnya. - .dk-app : shell dashboard. Elemen customizer (.dk-fab, .dk-cz, ...) berada di luar .dk-app, jadi ikut disebut eksplisit di aturan box-sizing di bawah. Semua font-family memakai !important — pola yang sama dengan .ph di assets/icons/phosphor.css — supaya ekstensi browser (reading mode, force-font, font aksesibilitas) tidak menimpa Inter dengan font bawaan sistem. */ .dk-root { font-family: var(--dk-font-body) !important; background: var(--dk-color-bg); color: var(--dk-text); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.45; margin: 0; padding: 0; } /* box-sizing hanya untuk elemen kita + turunannya */ .dk-app, .dk-app *, .dk-app *::before, .dk-app *::after, .dk-cz, .dk-cz *, .dk-fab, .dk-cz-overlay, .dk-sb-backdrop { box-sizing: border-box; } .dk-app a, .dk-cz a { color: inherit; text-decoration: none; } .dk-app i.ph, .dk-cz i.ph, .dk-fab i.ph { font-size: 18px; line-height: 1; } /* ============ SHELL ============ */ .dk-app { display: grid; grid-template-columns: var(--dk-sidebar-w) 1fr; gap: 16px; padding: 16px; min-height: 100vh; } /* ============ SIDEBAR (card) ============ */ .dk-sidebar { background: var(--dk-color-sidebar); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-panel); box-shadow: var(--dk-shadow-card); display: flex; flex-direction: column; padding: 20px 16px; gap: 0; position: sticky; top: 16px; height: calc(100vh - 32px); overflow: hidden; } .dk-brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px; margin-bottom: 26px; } .dk-brand__logo { width: 44px; height: 44px; border-radius: 13px; background: var(--dk-gradient-primary); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; font-family: var(--dk-font-display) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--dk-color-primary) 34%, transparent); } .dk-brand__logo { cursor: pointer; } .dk-brand__meta { min-width: 0; } .dk-brand__title { font-family: var(--dk-font-display) !important; font-weight: 700; color: var(--dk-text-strong); font-size: 16px; line-height: 1.1; } .dk-brand__sub { font-size: 12px; color: var(--dk-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-collapse-btn { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--dk-border); background: var(--dk-color-surface); color: var(--dk-text-muted); display: grid; place-items: center; cursor: pointer; } .dk-collapse-btn i { font-size: 16px; } .dk-collapse-btn:hover { background: var(--dk-info-soft); color: var(--dk-color-primary); } /* Sidebar collapsed (desktop saja) */ .dk-app { transition: grid-template-columns .2s ease; } @media (min-width:901px) { .dk-sb-collapsed .dk-app { grid-template-columns: 76px 1fr; } .dk-sb-collapsed .dk-sidebar { padding: 20px 12px; } .dk-sb-collapsed .dk-brand { justify-content: center; } .dk-sb-collapsed .dk-brand__meta, .dk-sb-collapsed .dk-collapse-btn { display: none; } .dk-sb-collapsed .dk-nav { margin-right: 0; padding-right: 0; } .dk-sb-collapsed .dk-nav__group { font-size: 0; padding: 12px 0 4px; } .dk-sb-collapsed .dk-nav__item { justify-content: center; gap: 0; font-size: 0; padding: 11px 0; position: relative; } .dk-sb-collapsed .dk-nav__item i { font-size: 20px; } .dk-sb-collapsed .dk-nav__badge { position: absolute; top: 7px; right: 16px; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; } .dk-sb-collapsed .dk-userbox { justify-content: center; padding: 14px 0 4px; } .dk-sb-collapsed .dk-userbox__info, .dk-sb-collapsed .dk-userbox__out { display: none; } } /* Tombol menu (mobile) dan backdrop drawer */ .dk-menu-btn { display: none; flex: none; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--dk-border); background: var(--dk-color-surface); color: var(--dk-text-strong); place-items: center; cursor: pointer; } .dk-menu-btn i { font-size: 20px; } .dk-sb-backdrop { position: fixed; inset: 0; z-index: 75; background: rgba(17, 17, 28, .3); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } /* Akun, pinned di bawah sidebar */ .dk-userbox { display: flex; align-items: center; gap: 12px; padding: 14px 8px 4px; border-top: 1px solid var(--dk-border-soft); margin-top: 0; } .dk-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--dk-gradient-primary); color: #fff; display: grid; place-items: center; font-family: var(--dk-font-display) !important; font-weight: 700; font-size: 14px; } .dk-userbox__info { min-width: 0; flex: 1; } .dk-userbox__name { font-family: var(--dk-font-display) !important; font-weight: 700; color: var(--dk-text-strong); font-size: 14px; line-height: 1.2; } .dk-userbox__mail { font-size: 12px; color: var(--dk-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-userbox__out { color: var(--dk-text-muted); cursor: pointer; flex: none; padding: 6px; border-radius: 9px; } .dk-userbox__out:hover { color: var(--dk-danger); background: var(--dk-danger-soft); } .dk-nav-wrap { position: relative; flex: 1; min-height: 0; } .dk-nav-wrap::before, .dk-nav-wrap::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none; z-index: 3; transition: opacity .18s ease; } .dk-nav-wrap::before { top: 0; background: linear-gradient(to bottom, var(--dk-scroll-shadow), transparent); } .dk-nav-wrap::after { bottom: 0; background: linear-gradient(to top, var(--dk-scroll-shadow), transparent); } .dk-nav-wrap.dk-at-top::before { opacity: 0; } .dk-nav-wrap.dk-at-bottom::after { opacity: 0; } .dk-nav { display: flex; flex-direction: column; gap: 4px; height: 100%; overflow-y: auto; margin-right: -9px; padding-right: 9px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--dk-text-muted) 26%, transparent) transparent; } .dk-nav::-webkit-scrollbar { width: 5px; } .dk-nav::-webkit-scrollbar-track { background: transparent; } .dk-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dk-text-muted) 22%, transparent); border: 2px solid transparent; background-clip: content-box; border-radius: 9999px; } .dk-nav__group { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--dk-text-muted); padding: 14px 10px 6px; text-transform: uppercase; } .dk-nav__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--dk-text); font-weight: 500; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; } .dk-nav__item i { color: var(--dk-text-muted); } .dk-nav__item:hover { background: var(--dk-color-surface-2); } .dk-nav__item--active { background: var(--dk-info-soft); color: var(--dk-color-primary); font-weight: 600; } .dk-nav__item--active i { color: var(--dk-color-primary); } .dk-nav__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; background: var(--dk-color-primary); color: #fff; font-family: var(--dk-font-display) !important; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .dk-nav__badge--alert { background: var(--dk-danger); } /* ============ MAIN ============ */ .dk-main { min-width: 0; display: flex; flex-direction: column; } .dk-main__inner { background: var(--dk-color-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-panel); box-shadow: var(--dk-shadow-card); padding: 24px 26px 30px; min-height: calc(100vh - 32px); } .dk-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--dk-text-muted); } .dk-crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .dk-refresh { font-size: 13px; } .dk-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 6px 0 22px; } .dk-pagehead h1 { font-family: var(--dk-font-display) !important; font-weight: 800; color: var(--dk-text-strong); font-size: 26px; margin: 2px 0 0; } .dk-livepill { display: inline-flex; align-items: center; gap: 8px; background: var(--dk-success-soft); color: var(--dk-success); border-radius: var(--dk-radius-pill); padding: 7px 14px; font-weight: 600; font-size: 13px; } .dk-livepill b { color: var(--dk-text-strong); font-weight: 600; } .dk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dk-success); display: inline-block; } /* Cards */ .dk-card { background: var(--dk-color-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-card); padding: 20px; } .dk-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .dk-card__title { font-family: var(--dk-font-display) !important; font-weight: 700; color: var(--dk-text-strong); font-size: 17px; } .dk-card__act { color: var(--dk-text-muted); display: flex; align-items: center; gap: 6px; } .dk-link { color: var(--dk-color-primary); font-weight: 600; font-size: 13.5px; cursor: pointer; } .dk-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; } .dk-grid-2 { display: grid; grid-template-columns: 1fr 1.55fr; gap: 20px; } /* Mini stat */ .dk-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .dk-mini { background: var(--dk-color-surface-2); border: 1px solid var(--dk-border-soft); border-radius: var(--dk-radius-md); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .dk-mini__top { display: flex; align-items: center; gap: 10px; color: var(--dk-text-muted); } .dk-mini__ico { width: 34px; height: 34px; border-radius: 10px; background: var(--dk-color-surface); border: 1px solid var(--dk-border); display: grid; place-items: center; color: var(--dk-text-muted); } .dk-mini__label { font-size: 13px; font-weight: 500; color: var(--dk-text); } .dk-mini__val { font-family: var(--dk-font-display) !important; font-weight: 800; color: var(--dk-text-strong); font-size: 26px; line-height: 1; } .dk-mini__foot { font-size: 12.5px; color: var(--dk-text-muted); display: flex; align-items: center; gap: 7px; } /* Delta pill */ .dk-delta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; } .dk-delta i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; } .dk-delta--up { color: var(--dk-success); } .dk-delta--up i { background: var(--dk-success); } .dk-delta--down { color: var(--dk-danger); } .dk-delta--down i { background: var(--dk-danger); } .dk-delta small { color: var(--dk-text-muted); font-weight: 500; } /* Quick stats mini variation */ .dk-qmini .dk-mini__val { font-size: 24px; } /* Table */ .dk-table { width: 100%; border-collapse: collapse; } .dk-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--dk-text-muted); text-transform: none; padding: 0 12px 12px; border-bottom: 1px solid var(--dk-border-soft); } .dk-table td { padding: 0 12px; height: var(--dk-row-h); border-bottom: 1px solid var(--dk-border-soft); font-size: 13.5px; color: var(--dk-text); vertical-align: middle; } .dk-table tr:last-child td { border-bottom: 0; } .dk-table .dk-oid { font-weight: 600; color: var(--dk-text-strong); } .dk-table .dk-muted { color: var(--dk-text-muted); } .dk-tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--dk-radius-pill); font-size: 12.5px; font-weight: 600; } .dk-tag--new { background: var(--dk-success-soft); color: var(--dk-success); } .dk-tag--delivered { background: var(--dk-info-soft); color: var(--dk-info); } .dk-tag--processing { background: var(--dk-warning-soft); color: var(--dk-warning); } .dk-rowact { color: var(--dk-text-muted); cursor: pointer; } /* Form */ .dk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .dk-field label { font-size: 12.5px; font-weight: 600; color: var(--dk-text); } .dk-input, .dk-select { width: 100%; padding: 11px 12px; border: 1px solid var(--dk-border); border-radius: 12px; background: var(--dk-color-surface-2); font-family: var(--dk-font-body) !important; font-size: 13.5px; color: var(--dk-text-strong); outline: 0; transition: border-color .15s, box-shadow .15s, background .15s; } textarea.dk-input { resize: vertical; min-height: 76px; } .dk-input::placeholder { color: var(--dk-text-muted); } .dk-input:focus, .dk-select:focus { border-color: var(--dk-color-primary); box-shadow: 0 0 0 3px var(--dk-info-soft); background: var(--dk-color-surface); } .dk-btn { width: 100%; padding: 11px 14px; border: 0; border-radius: 12px; background: var(--dk-gradient-primary); color: #fff; font-family: var(--dk-font-display) !important; font-weight: 600; font-size: 14px; cursor: pointer; } .dk-btn:hover { filter: brightness(.98); } /* Bar list (produk terlaris, kategori) */ .dk-blist { display: flex; flex-direction: column; gap: 16px; } .dk-brow { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px 12px; align-items: center; } .dk-brow__rank { width: 22px; height: 22px; border-radius: 8px; background: var(--dk-color-surface-2); border: 1px solid var(--dk-border-soft); color: var(--dk-text-muted); font-family: var(--dk-font-display) !important; font-weight: 700; font-size: 12px; display: grid; place-items: center; } .dk-brow:first-child .dk-brow__rank { background: var(--dk-info-soft); color: var(--dk-color-primary); border-color: transparent; } .dk-brow__name { font-size: 13.5px; color: var(--dk-text-strong); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-brow__val { font-family: var(--dk-font-display) !important; font-weight: 700; color: var(--dk-text-strong); font-size: 13px; white-space: nowrap; } .dk-brow__bar { grid-column: 2/-1; height: 8px; border-radius: 9999px; background: var(--dk-color-surface-2); overflow: hidden; } .dk-brow__bar>i { display: block; height: 100%; border-radius: 9999px; background: var(--dk-gradient-primary); } .dk-blist--plain .dk-brow { grid-template-columns: 1fr auto; } .dk-blist--plain .dk-brow__bar { grid-column: 1/-1; } /* Trend chart */ .dk-trend__val { font-family: var(--dk-font-display) !important; font-weight: 800; color: var(--dk-text-strong); font-size: 24px; line-height: 1; margin-bottom: 6px; } .dk-trend__labels { display: flex; justify-content: space-between; margin-top: 8px; color: var(--dk-text-muted); font-size: 11px; } /* ============ CUSTOMIZER ============ */ .dk-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--dk-border); background: var(--dk-color-surface); color: var(--dk-color-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--dk-shadow-card); } .dk-fab i { font-size: 24px; } .dk-fab:hover { background: var(--dk-info-soft); } .dk-cz-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(17, 17, 28, .30); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } .dk-cz-overlay.dk-open { opacity: 1; visibility: visible; } .dk-cz { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; z-index: 60; background: var(--dk-color-surface); border-left: 1px solid var(--dk-border); box-shadow: -20px 0 50px rgba(17, 17, 28, .16); transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; } .dk-cz.dk-open { transform: none; } .dk-cz__head { padding: 22px 24px; border-bottom: 1px solid var(--dk-border-soft); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .dk-cz__title { font-family: var(--dk-font-display) !important; font-weight: 700; color: var(--dk-text-strong); font-size: 20px; } .dk-cz__sub { color: var(--dk-text-muted); font-size: 14px; margin-top: 3px; } .dk-cz__actions { display: flex; align-items: center; gap: 14px; } .dk-cz__reset { position: relative; cursor: pointer; color: var(--dk-text-muted); font-size: 22px; } .dk-cz__reset::after { content: ""; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--dk-danger); } .dk-cz__close { cursor: pointer; font-size: 22px; color: var(--dk-text-strong); } .dk-cz__body { padding: 22px 24px; overflow-y: auto; } .dk-cz__pill { display: inline-block; background: var(--dk-info-soft); color: var(--dk-color-primary); font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 12px; margin-bottom: 24px; } .dk-cz__label { font-family: var(--dk-font-display) !important; font-weight: 700; color: var(--dk-text-strong); font-size: 19px; margin: 0 0 14px; } .dk-sw-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; } .dk-sw { width: 74px; height: 74px; border-radius: 16px; border: 1px solid var(--dk-border); background: var(--dk-color-surface); display: grid; place-items: center; cursor: pointer; padding: 0; } .dk-sw.dk-sel { border-color: var(--dk-color-primary); box-shadow: 0 0 0 3px var(--dk-info-soft); } .dk-sw__c { width: 40px; height: 40px; border-radius: 11px; display: block; } .dk-sw--custom { color: var(--dk-danger); position: relative; } .dk-sw--custom i { font-size: 24px; } .dk-sw--custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dk-theme-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .dk-th { border: 1px solid var(--dk-border); border-radius: 14px; cursor: pointer; background: var(--dk-color-surface); overflow: hidden; padding: 0; font-family: var(--dk-font-body) !important; } .dk-th__box { height: 66px; display: grid; place-items: center; color: var(--dk-text-strong); } .dk-th__box i { font-size: 28px; } .dk-th__cap { padding: 10px 0; color: var(--dk-text); font-size: 14px; text-align: center; } .dk-th.dk-sel { border-color: var(--dk-color-primary); } .dk-th.dk-sel .dk-th__box { background: var(--dk-info-soft); color: var(--dk-color-primary); } @media(max-width:520px) { .dk-cz { width: 100%; } } @media (max-width:1180px) { .dk-grid-3 { grid-template-columns: 1fr; } .dk-grid-2 { grid-template-columns: 1fr; } } @media (max-width:900px) { .dk-app { grid-template-columns: 1fr; padding: 12px; gap: 0; } .dk-menu-btn { display: grid; } .dk-collapse-btn { display: none; } .dk-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 284px; max-width: 86vw; z-index: 80; border-radius: 0 22px 22px 0; transform: translateX(-100%); transition: transform .25s ease; } .dk-sidebar.dk-open { transform: none; box-shadow: 20px 0 50px rgba(17, 17, 28, .18); } .dk-sb-backdrop.dk-open { opacity: 1; visibility: visible; } .dk-main__inner { padding: 18px 16px 24px; min-height: calc(100vh - 24px); } } /* ====================================================================== KOMPONEN TAMBAHAN — di-port dari template Nova (Dashkit) ke sistem dk-. Sumber: templates/nova/src/css/styles.css. Prefix dk-, token --dk-, tema data-dk-theme, font-family !important (konvensi Ametis). Base & customizer Ametis yang lama TIDAK diubah — ini murni tambahan. ====================================================================== */ /* .dk-btn base disempurnakan agar mendukung ikon + varian (inline-flex, gap, disabled) */ .dk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s,background .15s,color .15s;} .dk-btn:disabled{opacity:.5;cursor:not-allowed;filter:none;} /* box-sizing untuk komponen overlay yang bisa dirender di luar .dk-app */ .dk-modal-overlay,.dk-modal-overlay *,.dk-toast,.dk-toast *{box-sizing:border-box;} /* Item navigasi contoh: tampil seperti menu tapi sengaja tidak bisa diklik */ .dk-nav__item--dummy{cursor:default;opacity:.55;} .dk-nav__item--dummy:hover{background:transparent;} .dk-live-txt{color:var(--dk-success);font-weight:600;display:flex;align-items:center;gap:6px;} .dk-btn--auto{width:auto;} .dk-btn--ghost{background:var(--dk-color-surface-2);color:var(--dk-text-strong);border:1px solid var(--dk-border);} .dk-btn--ghost:hover{filter:none;background:var(--dk-info-soft);color:var(--dk-color-primary);border-color:var(--dk-info-soft);} .dk-btn--danger{background:var(--dk-danger);} /* Checkbox / radio / switch */ .dk-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:var(--dk-text);} .dk-check input{accent-color:var(--dk-color-primary);width:17px;height:17px;cursor:pointer;} .dk-switch{position:relative;width:42px;height:24px;flex:none;} .dk-switch input{opacity:0;width:0;height:0;} .dk-switch__slider{position:absolute;inset:0;border-radius:9999px;background:var(--dk-border);transition:background .15s;cursor:pointer;} .dk-switch__slider::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:var(--dk-shadow-soft);} .dk-switch input:checked + .dk-switch__slider{background:var(--dk-color-primary);} .dk-switch input:checked + .dk-switch__slider::before{transform:translateX(18px);} /* ============ ALERT ============ */ .dk-alert{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--dk-radius-md); border:1px solid var(--dk-border);background:var(--dk-color-surface-2);color:var(--dk-text);font-size:13.5px;} .dk-alert i{font-size:20px;margin-top:1px;} .dk-alert__title{font-weight:600;color:var(--dk-text-strong);} .dk-alert--success{background:var(--dk-success-soft);border-color:transparent;color:var(--dk-success);} .dk-alert--danger{background:var(--dk-danger-soft);border-color:transparent;color:var(--dk-danger);} .dk-alert--warning{background:var(--dk-warning-soft);border-color:transparent;color:var(--dk-warning);} .dk-alert--info{background:var(--dk-info-soft);border-color:transparent;color:var(--dk-color-primary);} .dk-alert--success .dk-alert__title,.dk-alert--danger .dk-alert__title, .dk-alert--warning .dk-alert__title,.dk-alert--info .dk-alert__title{color:inherit;} /* ============ TABS ============ */ .dk-tabs{display:flex;gap:4px;border-bottom:1px solid var(--dk-border-soft);margin-bottom:16px;} .dk-tab{padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--dk-text-muted);cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;} .dk-tab:hover{color:var(--dk-text-strong);} .dk-tab--active{color:var(--dk-color-primary);border-bottom-color:var(--dk-color-primary);} /* ============ MODAL ============ */ .dk-modal-overlay{position:fixed;inset:0;z-index:90;background:rgba(17,17,28,.35); display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;} .dk-modal-overlay.dk-open{opacity:1;visibility:visible;} .dk-modal{width:440px;max-width:100%;background:var(--dk-color-surface);border:1px solid var(--dk-border); border-radius:var(--dk-radius-card);box-shadow:var(--dk-shadow-card);transform:translateY(8px) scale(.98); transition:transform .2s;overflow:hidden;} .dk-modal-overlay.dk-open .dk-modal{transform:none;} .dk-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 0;} .dk-modal__title{font-family:var(--dk-font-display) !important;font-weight:700;color:var(--dk-text-strong);font-size:18px;} .dk-modal__close{cursor:pointer;color:var(--dk-text-muted);font-size:20px;} .dk-modal__body{padding:14px 22px;color:var(--dk-text);font-size:13.5px;} .dk-modal__foot{display:flex;justify-content:flex-end;gap:10px;padding:0 22px 20px;} .dk-modal__foot .dk-btn{width:auto;} /* inputs with leading/trailing icons */ .dk-input-group{position:relative;} .dk-input-group:has(.dk-input-lead) .dk-input{padding-left:40px;} .dk-input-group:has(.dk-input-affix) .dk-input{padding-right:42px;} .dk-input-lead{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dk-text-muted);font-size:18px;pointer-events:none;} .dk-input-affix{position:absolute;top:50%;right:6px;transform:translateY(-50%); width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--dk-text-muted); display:grid;place-items:center;cursor:pointer;} .dk-input-affix:hover{color:var(--dk-color-primary);background:var(--dk-info-soft);} /* password strength meter */ .dk-strength{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 4px;} .dk-strength__seg{height:5px;border-radius:9999px;background:var(--dk-border);transition:background .2s;} .dk-strength[data-score="1"] .dk-strength__seg:nth-child(-n+1){background:var(--dk-danger);} .dk-strength[data-score="2"] .dk-strength__seg:nth-child(-n+2){background:var(--dk-warning);} .dk-strength[data-score="3"] .dk-strength__seg:nth-child(-n+3){background:var(--dk-warning);} .dk-strength[data-score="4"] .dk-strength__seg:nth-child(-n+4){background:var(--dk-success);} .dk-strength__label{font-size:12px;color:var(--dk-text-muted);min-height:16px;margin-bottom:8px;} /* ============ DOCS (component documentation blocks) ============ */ .dk-doc{margin-bottom:22px;} .dk-doc:last-child{margin-bottom:0;} .dk-doc__head{margin-bottom:12px;} .dk-doc__name{font-family:var(--dk-font-display) !important;font-weight:700;color:var(--dk-text-strong);font-size:14px; display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .dk-doc__desc{color:var(--dk-text-muted);font-size:12.5px;margin-top:4px;line-height:1.5;} .dk-doc__hook{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:9999px; background:var(--dk-info-soft);color:var(--dk-color-primary);font-family:var(--dk-font-body) !important; font-size:11px;font-weight:600;letter-spacing:0;} .dk-doc__hook i{font-size:12px;} .dk-doc__hook--none{background:var(--dk-color-surface-2);color:var(--dk-text-muted);} /* Latar preview sengaja putih (--dk-color-surface), bukan surface-2: banyak komponen (tombol ghost, input, mini card) berlatar surface-2, jadi kalau wadahnya juga surface-2 keduanya melebur dan tidak terlihat. */ .dk-doc__preview{border:1px solid var(--dk-border);border-radius:var(--dk-radius-md);background:var(--dk-color-surface); padding:20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;} .dk-doc__preview--block{display:block;} /* Vertical rhythm for stacked previews: elements without their own margin (alert, progress, dropzone…) get spacing; .dk-field already carries margin-bottom. */ .dk-doc__preview--block > * + *{margin-top:14px;} .dk-doc__preview--block > .dk-field + .dk-field{margin-top:0;} .dk-doc__preview--block > .dk-field:last-child, .dk-doc__preview--block > *:last-child{margin-bottom:0;} .dk-doc__preview--block > .dk-tabs{margin-top:0;} .dk-code{position:relative;margin-top:10px;border:1px solid var(--dk-border);border-radius:var(--dk-radius-md); background:var(--dk-color-surface-2);overflow:hidden;} .dk-code__bar{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:8px 12px;border-bottom:1px solid var(--dk-border-soft);} .dk-code__lang{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dk-text-muted);} .dk-code__copy{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--dk-border);border-radius:8px; background:var(--dk-color-surface);color:var(--dk-text);font-family:var(--dk-font-body) !important;font-size:11.5px;font-weight:600; padding:5px 10px;cursor:pointer;transition:background .15s,color .15s;} .dk-code__copy:hover{background:var(--dk-info-soft);color:var(--dk-color-primary);border-color:transparent;} .dk-code pre{margin:0;padding:14px;overflow-x:auto;} .dk-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;font-size:12px;line-height:1.65; color:var(--dk-text-strong);white-space:pre;display:block;} .dk-code pre::-webkit-scrollbar{height:6px;} .dk-code pre::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--dk-text-muted) 24%, transparent);border-radius:9999px;} .dk-doc-note{display:flex;gap:10px;padding:12px 14px;border-radius:var(--dk-radius-md); background:var(--dk-info-soft);color:var(--dk-color-primary);font-size:12.5px;line-height:1.55;margin-top:10px;} .dk-doc-note i{font-size:16px;flex:none;margin-top:1px;} .dk-doc-note code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;font-size:11.5px; background:color-mix(in srgb, var(--dk-color-primary) 12%, transparent);padding:1px 5px;border-radius:5px;} /* ============ CATALOG (components page helpers) ============ */ .dk-cat{columns:2;column-gap:20px;margin-bottom:20px;} .dk-cat > .dk-card{break-inside:avoid;margin:0 0 20px;width:100%;} @media (max-width:1180px){.dk-cat{columns:1;}} .dk-section{margin-bottom:20px;} .dk-section__title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--dk-text-muted);margin:0 0 14px;} .dk-spec-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px;} .dk-spec{display:flex;flex-direction:column;gap:8px;min-width:0;} .dk-spec__label{font-size:12px;color:var(--dk-text-muted);} .dk-stack{display:flex;flex-direction:column;gap:12px;} .dk-swatches{display:flex;flex-wrap:wrap;gap:14px;} .dk-swatch{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--dk-text-muted);} .dk-swatch__chip{width:72px;height:46px;border-radius:12px;border:1px solid var(--dk-border);} .dk-swatch b{color:var(--dk-text-strong);font-weight:600;font-family:var(--dk-font-display) !important;} /* ============ EXTRA COMPONENTS ============ */ /* Button sizes / icon-only / loading */ .dk-btn--sm{padding:8px 12px;font-size:13px;border-radius:10px;} .dk-btn--lg{padding:14px 20px;font-size:15px;border-radius:14px;} .dk-btn--icon{width:40px;height:40px;padding:0;border-radius:12px;} .dk-btn--icon.dk-btn--sm{width:34px;height:34px;border-radius:10px;} .dk-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .6s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} /* Avatars: sizes, status, group */ .dk-avatar--sm{width:30px;height:30px;font-size:12px;} .dk-avatar--lg{width:52px;height:52px;font-size:17px;} .dk-avatar-wrap{position:relative;display:inline-grid;} .dk-avatar-status{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%; background:var(--dk-success);border:2px solid var(--dk-color-surface);} .dk-avatar-status--off{background:var(--dk-text-muted);} .dk-avatar-group{display:flex;} .dk-avatar-group .dk-avatar{border:2px solid var(--dk-color-surface);margin-left:-10px;} .dk-avatar-group .dk-avatar:first-child{margin-left:0;} .dk-avatar-group .dk-avatar--more{background:var(--dk-color-surface-2);color:var(--dk-text);} /* Progress */ .dk-progress{height:8px;border-radius:9999px;background:var(--dk-border);overflow:hidden;} .dk-progress__bar{height:100%;border-radius:9999px;background:var(--dk-gradient-primary);} .dk-progress--indet .dk-progress__bar{width:40%;animation:indet 1.2s ease-in-out infinite;} @keyframes indet{0%{margin-left:-40%;}100%{margin-left:100%;}} /* Chips */ .dk-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:9999px; border:1px solid var(--dk-border);background:var(--dk-color-surface-2);color:var(--dk-text);font-size:13px;font-weight:500;cursor:pointer;} .dk-chip--active{background:var(--dk-info-soft);color:var(--dk-color-primary);border-color:transparent;font-weight:600;} .dk-chip__x{cursor:pointer;font-size:14px;opacity:.7;} .dk-chip__x:hover{opacity:1;} /* Segmented control */ .dk-segment{display:inline-flex;background:var(--dk-color-surface-2);border:1px solid var(--dk-border);border-radius:12px;padding:4px;gap:4px;} .dk-segment__btn{border:0;background:transparent;color:var(--dk-text);font-family:var(--dk-font-body) !important;font-size:13px;font-weight:600; padding:7px 14px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s;} .dk-segment__btn--active{background:var(--dk-color-surface);color:var(--dk-text-strong);box-shadow:var(--dk-shadow-soft);} /* Dropdown */ .dk-dropdown{position:relative;display:inline-block;} .dk-dropdown__menu{position:absolute;top:calc(100% + 6px);left:0;min-width:186px;z-index:20; background:var(--dk-color-surface);border:1px solid var(--dk-border);border-radius:14px;box-shadow:var(--dk-shadow-card); padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;} .dk-dropdown.dk-open .dk-dropdown__menu{opacity:1;visibility:visible;transform:none;} .dk-dropdown__item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13.5px;color:var(--dk-text);cursor:pointer;} .dk-dropdown__item:hover{background:var(--dk-color-surface-2);color:var(--dk-text-strong);} .dk-dropdown__item i{color:var(--dk-text-muted);font-size:17px;} .dk-dropdown__item--danger{color:var(--dk-danger);} .dk-dropdown__item--danger i{color:var(--dk-danger);} .dk-dropdown__sep{height:1px;background:var(--dk-border-soft);margin:6px 4px;} /* Accordion */ .dk-accordion{border:1px solid var(--dk-border);border-radius:var(--dk-radius-md);overflow:hidden;} .dk-acc + .dk-acc{border-top:1px solid var(--dk-border-soft);} .dk-acc__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer; font-weight:600;color:var(--dk-text-strong);font-size:14px;background:var(--dk-color-surface);} .dk-acc__head i{color:var(--dk-text-muted);transition:transform .2s;} .dk-acc.dk-open .dk-acc__head i{transform:rotate(180deg);} .dk-acc__body{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--dk-text);font-size:13.5px;} .dk-acc__body-inner{padding:0 16px 14px;} .dk-acc.dk-open .dk-acc__body{max-height:220px;} /* Pagination */ .dk-pagination{display:inline-flex;gap:6px;} .dk-page{min-width:34px;height:34px;padding:0 8px;border-radius:10px;border:1px solid var(--dk-border);background:var(--dk-color-surface); color:var(--dk-text);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;} .dk-page:hover{background:var(--dk-color-surface-2);} .dk-page--active{background:var(--dk-color-primary);color:#fff;border-color:transparent;} .dk-page--disabled{opacity:.45;pointer-events:none;} /* Tooltip */ .dk-tip{position:relative;} .dk-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px); background:var(--dk-text-strong);color:var(--dk-color-surface);font-size:12px;font-weight:500;white-space:nowrap; padding:6px 10px;border-radius:8px;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none;z-index:30;} .dk-tip:hover::after{opacity:1;visibility:visible;transform:translateX(-50%);} /* Toast */ .dk-toast{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px; background:var(--dk-color-surface);border:1px solid var(--dk-border);box-shadow:var(--dk-shadow-card);font-size:13.5px;color:var(--dk-text);} .dk-toast__ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:18px;} .dk-toast--success .dk-toast__ico{background:var(--dk-success-soft);color:var(--dk-success);} .dk-toast--danger .dk-toast__ico{background:var(--dk-danger-soft);color:var(--dk-danger);} .dk-toast__title{font-weight:600;color:var(--dk-text-strong);} .dk-toast__close{margin-left:auto;color:var(--dk-text-muted);cursor:pointer;} /* Empty state */ .dk-empty{text-align:center;padding:26px 16px;} .dk-empty__ico{width:56px;height:56px;border-radius:16px;background:var(--dk-color-surface-2);border:1px solid var(--dk-border); display:grid;place-items:center;margin:0 auto 14px;color:var(--dk-text-muted);font-size:26px;} .dk-empty__title{font-family:var(--dk-font-display) !important;font-weight:700;color:var(--dk-text-strong);font-size:15px;margin-bottom:4px;} .dk-empty__sub{color:var(--dk-text-muted);font-size:13px;margin-bottom:16px;} /* Skeleton */ .dk-skeleton{background:linear-gradient(90deg,var(--dk-color-surface-2) 25%,var(--dk-border-soft) 37%,var(--dk-color-surface-2) 63%); background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:8px;} @keyframes sk{0%{background-position:100% 0;}100%{background-position:-100% 0;}} .dk-skeleton--line{height:12px;margin-bottom:10px;} .dk-skeleton--circle{width:44px;height:44px;border-radius:50%;flex:none;} /* Steps */ .dk-steps{display:flex;align-items:center;flex-wrap:wrap;} .dk-step{display:flex;align-items:center;gap:10px;color:var(--dk-text-muted);font-size:13px;font-weight:600;} .dk-step__dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--dk-border);display:grid;place-items:center; font-size:13px;background:var(--dk-color-surface);} .dk-step__line{width:40px;height:2px;background:var(--dk-border);margin:0 12px;} .dk-step--done .dk-step__dot{background:var(--dk-color-primary);border-color:var(--dk-color-primary);color:#fff;} .dk-step--done,.dk-step--active{color:var(--dk-text-strong);} .dk-step--active .dk-step__dot{border-color:var(--dk-color-primary);color:var(--dk-color-primary);} /* Timeline */ .dk-timeline{position:relative;padding-left:22px;} .dk-timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--dk-border);} .dk-tl{position:relative;padding-bottom:16px;} .dk-tl:last-child{padding-bottom:0;} .dk-tl::before{content:"";position:absolute;left:-19px;top:3px;width:10px;height:10px;border-radius:50%; background:var(--dk-color-primary);border:2px solid var(--dk-color-surface);} .dk-tl__t{font-size:12px;color:var(--dk-text-muted);} .dk-tl__d{font-size:13.5px;color:var(--dk-text);} .dk-tl__d b{color:var(--dk-text-strong);font-weight:600;} /* Rating */ .dk-rating{display:inline-flex;gap:3px;color:var(--dk-warning);font-size:18px;line-height:1;} .dk-rating .dk-off{color:var(--dk-border);} /* Kbd */ .dk-kbd{display:inline-block;padding:3px 8px;border-radius:7px;border:1px solid var(--dk-border);border-bottom-width:2px; background:var(--dk-color-surface-2);color:var(--dk-text-strong);font-family:var(--dk-font-display) !important;font-size:12px;font-weight:600;} /* ============ FORM PAGE (sections, dropzone, validation, sticky bar) ============ */ .dk-form-section{border-bottom:1px solid var(--dk-border-soft);padding-bottom:22px;margin-bottom:22px;} .dk-form-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;} .dk-form-section__head{margin-bottom:16px;} .dk-form-section__title{font-family:var(--dk-font-display) !important;font-weight:700;color:var(--dk-text-strong);font-size:15px;display:flex;align-items:center;gap:8px;} .dk-form-section__title i{color:var(--dk-color-primary);font-size:18px;} .dk-form-section__sub{color:var(--dk-text-muted);font-size:12.5px;margin-top:3px;} .dk-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;} .dk-form-grid .dk-field{grid-column:span 1;} .dk-field--full{grid-column:1/-1;} .dk-req{color:var(--dk-danger);margin-left:2px;} .dk-help{font-size:12px;color:var(--dk-text-muted);margin-top:-2px;} .dk-field__hint-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-2px;} .dk-char-count{font-size:11.5px;color:var(--dk-text-muted);flex:none;} /* Field states: default / disabled / readonly / error / success */ .dk-input:disabled,.dk-select:disabled{background:var(--dk-border-soft);color:var(--dk-text-muted);cursor:not-allowed;border-color:var(--dk-border-soft);} .dk-input[readonly]{background:var(--dk-color-surface-2);color:var(--dk-text);cursor:default;} .dk-field__msg{display:none;font-size:12px;align-items:center;gap:5px;margin-top:-2px;} .dk-field--error .dk-input,.dk-field--error .dk-select{border-color:var(--dk-danger);} .dk-field--error .dk-input:focus{box-shadow:0 0 0 3px var(--dk-danger-soft);} .dk-field--error .dk-field__msg{display:flex;color:var(--dk-danger);} .dk-field--success .dk-input{border-color:var(--dk-success);} .dk-field--success .dk-field__msg{display:flex;color:var(--dk-success);} .dk-field--disabled label{color:var(--dk-text-muted);} /* Text prefix / suffix (currency, unit) — distinct from icon-only .dk-input-lead/.dk-input-affix */ .dk-input-prefix,.dk-input-suffix{position:absolute;top:50%;transform:translateY(-50%); color:var(--dk-text-muted);font-size:13.5px;font-weight:600;pointer-events:none;} .dk-input-prefix{left:12px;} .dk-input-suffix{right:12px;} .dk-input-group:has(.dk-input-prefix) .dk-input{padding-left:34px;} .dk-input-group:has(.dk-input-suffix) .dk-input{padding-right:48px;} /* Quantity stepper */ .dk-qty{display:inline-flex;align-items:center;border:1px solid var(--dk-border);border-radius:12px;overflow:hidden;background:var(--dk-color-surface-2);} .dk-qty__btn{width:38px;height:42px;border:0;background:transparent;color:var(--dk-text);font-size:16px;cursor:pointer;display:grid;place-items:center;} .dk-qty__btn:hover{background:var(--dk-info-soft);color:var(--dk-color-primary);} .dk-qty__val{width:50px;text-align:center;border:0;background:transparent;font-family:var(--dk-font-display) !important;font-weight:700;color:var(--dk-text-strong);font-size:14px;} .dk-qty__val:focus{outline:0;} .dk-spec-row--tight{gap:10px;} /* Tab panels (paired with .dk-tabs; data-panels on tab group, data-panel on each panel) */ [data-panel][hidden]{display:none;} /* Dropzone */ .dk-dropzone{border:1.5px dashed var(--dk-border);border-radius:var(--dk-radius-md);background:var(--dk-color-surface-2); padding:26px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;} .dk-dropzone:hover,.dk-dropzone--over{border-color:var(--dk-color-primary);background:var(--dk-info-soft);} .dk-dropzone__ico{width:44px;height:44px;border-radius:12px;background:var(--dk-color-surface);border:1px solid var(--dk-border); display:grid;place-items:center;margin:0 auto 12px;color:var(--dk-color-primary);font-size:22px;} .dk-dropzone__title{font-weight:600;color:var(--dk-text-strong);font-size:13.5px;} .dk-dropzone__sub{color:var(--dk-text-muted);font-size:12px;margin-top:4px;} .dk-dropzone input[type="file"]{display:none;} .dk-file-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--dk-border-soft); border-radius:12px;background:var(--dk-color-surface-2);margin-top:10px;} .dk-file-row__ico{width:34px;height:34px;border-radius:9px;background:var(--dk-color-surface);border:1px solid var(--dk-border); display:grid;place-items:center;color:var(--dk-color-primary);flex:none;} .dk-file-row__name{font-size:13px;font-weight:600;color:var(--dk-text-strong);} .dk-file-row__size{font-size:11.5px;color:var(--dk-text-muted);} .dk-file-row__x{margin-left:auto;color:var(--dk-text-muted);cursor:pointer;} /* Sticky action bar */ .dk-action-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:12px; margin:22px -26px -30px;padding:16px 26px;background:var(--dk-color-surface);border-top:1px solid var(--dk-border-soft); border-radius:0 0 var(--dk-radius-panel) var(--dk-radius-panel);} .dk-action-bar__hint{margin-right:auto;color:var(--dk-text-muted);font-size:12.5px;display:flex;align-items:center;gap:6px;} .dk-action-bar .dk-btn{width:auto;} /* responsive tambahan komponen form */ @media (max-width:900px){ .dk-form-grid{grid-template-columns:1fr;} }