/* ==========================================================================
   GOLDIKA — Gold Inventory & Kasir
   Premium light theme, Star Admin 2 inspired.
   ========================================================================== */

:root {
    --gk-gold: #c9a227;
    --gk-gold-2: #e0be5a;
    --gk-gold-3: #f3e3b0;
    --gk-gold-soft: #fdf7e6;
    --gk-navy: #15203a;
    --gk-navy-2: #1e2c4d;
    --gk-charcoal: #2b3245;
    --gk-cream: #faf7f1;
    --gk-body: #f4f5f9;
    --gk-card: #ffffff;
    --gk-line: #e9ecf3;
    --gk-text: #2a3042;
    --gk-muted: #8b93a7;

    --gk-green: #22a06b;
    --gk-green-soft: #e6f6ef;
    --gk-orange: #e2870c;
    --gk-orange-soft: #fdf1e0;
    --gk-red: #e14b4b;
    --gk-red-soft: #fdecec;
    --gk-blue: #3b7ddd;
    --gk-blue-soft: #eaf2fd;
    --gk-purple: #7a5cd6;
    --gk-purple-soft: #efeafc;
    --gk-gold-badge-soft: #fbf3dd;

    --gk-radius: 14px;
    --gk-radius-sm: 10px;
    --gk-shadow: 0 2px 14px rgba(21, 32, 58, .06);
    --gk-shadow-lg: 0 12px 40px rgba(21, 32, 58, .12);
    --gk-sidebar-w: 262px;
    --gk-navbar-h: 66px;
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--gk-body);
    color: var(--gk-text);
    font-size: 14px;
    letter-spacing: -.01em;
}

h1, h2, h3, h4, h5, h6, .gk-display { font-weight: 700; letter-spacing: -.02em; color: var(--gk-navy); }
a { text-decoration: none; }
.text-muted-2 { color: var(--gk-muted) !important; }
.fw-800 { font-weight: 800; }

/* ---------- Brand ---------- */
.gk-brand {
    display: flex; align-items: center; gap: .65rem;
    font-weight: 800; letter-spacing: .04em;
}
.gk-brand-mark {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--gk-gold) 0%, var(--gk-gold-2) 55%, #fff2c9 100%);
    color: #3d2f06; font-size: 1.05rem;
    box-shadow: 0 4px 14px rgba(201, 162, 39, .35);
}
.gk-brand-text { line-height: 1.05; }
.gk-brand-text b { font-size: 1.12rem; display: block; color: #fff; letter-spacing: .1em; }
.gk-brand-text small { font-size: .62rem; color: var(--gk-gold-2); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Sidebar ---------- */
.gk-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--gk-sidebar-w); z-index: 1040;
    background: linear-gradient(180deg, var(--gk-navy) 0%, #101a30 100%);
    display: flex; flex-direction: column;
    transition: transform .28s ease;
}
.gk-sidebar-head {
    height: var(--gk-navbar-h); display: flex; align-items: center; padding: 0 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07); flex: 0 0 auto;
}
.gk-sidebar-body { overflow-y: auto; padding: 1rem .75rem 2rem; flex: 1 1 auto; }
.gk-sidebar-body::-webkit-scrollbar { width: 5px; }
.gk-sidebar-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 4px; }

.gk-nav-label {
    color: rgba(255, 255, 255, .32); font-size: .63rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; padding: 1.1rem .85rem .45rem;
}
.gk-nav-item { margin-bottom: 2px; }
.gk-nav-link {
    display: flex; align-items: center; gap: .7rem; padding: .62rem .85rem;
    border-radius: var(--gk-radius-sm); color: rgba(255, 255, 255, .74);
    font-weight: 500; font-size: .845rem; transition: all .18s ease; position: relative;
}
.gk-nav-link i.gk-ico { font-size: 1.02rem; width: 20px; text-align: center; opacity: .85; }
.gk-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.gk-nav-link.active {
    background: linear-gradient(90deg, rgba(201, 162, 39, .22), rgba(201, 162, 39, .04));
    color: #fff; font-weight: 600;
}
.gk-nav-link.active::before {
    content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--gk-gold-2);
}
.gk-nav-link.active i.gk-ico { color: var(--gk-gold-2); opacity: 1; }
.gk-nav-link .gk-caret { margin-left: auto; font-size: .7rem; transition: transform .2s ease; }
.gk-nav-link[aria-expanded="true"] .gk-caret { transform: rotate(90deg); }

.gk-subnav { list-style: none; padding: .2rem 0 .3rem 2.1rem; margin: 0; }
.gk-subnav a {
    display: block; padding: .38rem .6rem; border-radius: 8px; font-size: .8rem;
    color: rgba(255, 255, 255, .55); transition: all .16s ease;
}
.gk-subnav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.gk-subnav a.active { color: var(--gk-gold-2); font-weight: 600; }

.gk-sidebar-foot {
    margin: .9rem .75rem 0; padding: .85rem; border-radius: var(--gk-radius-sm);
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(201, 162, 39, .22);
}
.gk-sidebar-foot small { color: rgba(255, 255, 255, .5); font-size: .68rem; }
.gk-sidebar-foot .price { color: var(--gk-gold-2); font-weight: 800; font-size: 1rem; }

/* ---------- Navbar ---------- */
.gk-main { margin-left: var(--gk-sidebar-w); transition: margin .28s ease; min-height: 100vh; display: flex; flex-direction: column; }
.gk-navbar {
    height: var(--gk-navbar-h); background: #fff; border-bottom: 1px solid var(--gk-line);
    display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
    position: sticky; top: 0; z-index: 1030;
}
.gk-icon-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--gk-line);
    background: #fff; color: var(--gk-text); display: grid; place-items: center;
    font-size: 1.05rem; transition: all .18s ease; position: relative;
}
.gk-icon-btn:hover { background: var(--gk-gold-soft); border-color: var(--gk-gold-3); color: var(--gk-gold); }
.gk-search {
    position: relative; max-width: 330px; width: 100%;
}
.gk-search input {
    border-radius: 10px; background: var(--gk-body); border: 1px solid transparent;
    padding-left: 2.35rem; height: 40px; font-size: .85rem;
}
.gk-search input:focus { background: #fff; border-color: var(--gk-gold-3); box-shadow: 0 0 0 3px rgba(201, 162, 39, .12); }
.gk-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--gk-muted); }

.gk-goldprice {
    display: flex; align-items: center; gap: .6rem; padding: .35rem .8rem;
    background: linear-gradient(135deg, var(--gk-gold-soft), #fff); border: 1px solid var(--gk-gold-3);
    border-radius: 11px;
}
.gk-goldprice .gp-ico { color: var(--gk-gold); font-size: 1.25rem; }
.gk-goldprice small { display: block; font-size: .62rem; color: var(--gk-muted); letter-spacing: .06em; text-transform: uppercase; }
.gk-goldprice b { font-size: .88rem; color: var(--gk-navy); }

.gk-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .7rem;
    border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .05em;
}
.gk-chip-online { background: var(--gk-green-soft); color: var(--gk-green); }
.gk-chip-demo { background: var(--gk-blue-soft); color: var(--gk-blue); cursor: help; }
.gk-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gk-pulse { animation: gkPulse 1.8s infinite; }
@keyframes gkPulse {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); opacity: .85; }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 1; }
}

.gk-badge-count {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
    border-radius: 9px; background: var(--gk-red); color: #fff; font-size: .62rem;
    font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff;
}
.gk-avatar {
    width: 36px; height: 36px; border-radius: 10px; object-fit: cover;
    background: linear-gradient(135deg, var(--gk-navy), var(--gk-navy-2));
    color: var(--gk-gold-2); display: grid; place-items: center; font-weight: 700; font-size: .8rem;
}

.dropdown-menu {
    border: 1px solid var(--gk-line); border-radius: var(--gk-radius);
    box-shadow: var(--gk-shadow-lg); padding: .4rem; font-size: .86rem;
}
.dropdown-item { border-radius: 8px; padding: .5rem .7rem; }
.dropdown-item:active { background: var(--gk-gold-soft); color: var(--gk-navy); }
.gk-notif-item { display: flex; gap: .7rem; padding: .6rem .55rem; border-radius: 10px; }
.gk-notif-item:hover { background: var(--gk-body); }
.gk-notif-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 34px; }

/* ---------- Content ---------- */
.gk-content { padding: 1.5rem; flex: 1 1 auto; }
.gk-page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1.35rem; }
.gk-page-head h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
.gk-page-head p { margin: 0; color: var(--gk-muted); font-size: .875rem; }
.breadcrumb { font-size: .78rem; margin: 0 0 .35rem; }
.breadcrumb a { color: var(--gk-muted); }
.breadcrumb .active { color: var(--gk-gold); font-weight: 600; }

/* ---------- Card ---------- */
.gk-card {
    background: var(--gk-card); border: 1px solid var(--gk-line); border-radius: var(--gk-radius);
    box-shadow: var(--gk-shadow); position: relative; overflow: hidden;
}
.gk-card-head {
    padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--gk-line);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.gk-card-head h5 { margin: 0; font-size: .98rem; }
.gk-card-head p { margin: .12rem 0 0; font-size: .76rem; color: var(--gk-muted); }
.gk-card-body { padding: 1.25rem; }
.gk-card-accent::after {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--gk-gold), var(--gk-gold-2), transparent);
}

/* ---------- Stat card ---------- */
.gk-stat { padding: 1.15rem 1.25rem; }
.gk-stat-ico {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    font-size: 1.3rem; margin-bottom: .9rem;
}
.gk-stat-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gk-muted); font-weight: 700; }
.gk-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--gk-navy); line-height: 1.15; margin: .3rem 0 .35rem; letter-spacing: -.03em; }
.gk-stat-trend { font-size: .74rem; font-weight: 600; display: inline-flex; align-items: center; gap: .28rem; }
.gk-stat:hover .gk-stat-ico { transform: translateY(-2px) scale(1.04); }
.gk-stat-ico { transition: transform .25s ease; }

.tone-gold   { background: var(--gk-gold-badge-soft); color: #a4801a; }
.tone-green  { background: var(--gk-green-soft);  color: var(--gk-green); }
.tone-orange { background: var(--gk-orange-soft); color: var(--gk-orange); }
.tone-red    { background: var(--gk-red-soft);    color: var(--gk-red); }
.tone-blue   { background: var(--gk-blue-soft);   color: var(--gk-blue); }
.tone-purple { background: var(--gk-purple-soft); color: var(--gk-purple); }
.tone-navy   { background: #e8ecf5; color: var(--gk-navy); }

/* ---------- Badge ---------- */
.gk-badge {
    display: inline-flex; align-items: center; gap: .32rem; padding: .28rem .62rem;
    border-radius: 8px; font-size: .715rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.gk-badge-green  { background: var(--gk-green-soft);  color: var(--gk-green); }
.gk-badge-orange { background: var(--gk-orange-soft); color: var(--gk-orange); }
.gk-badge-red    { background: var(--gk-red-soft);    color: var(--gk-red); }
.gk-badge-blue   { background: var(--gk-blue-soft);   color: var(--gk-blue); }
.gk-badge-gold   { background: var(--gk-gold-badge-soft); color: #a4801a; }
.gk-badge-navy   { background: #e8ecf5; color: var(--gk-navy); }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; font-size: .85rem; padding: .55rem 1.05rem; transition: all .2s ease; }
.btn-gold {
    background: linear-gradient(135deg, var(--gk-gold) 0%, var(--gk-gold-2) 100%);
    border: none; color: #35290a; box-shadow: 0 4px 14px rgba(201, 162, 39, .32);
}
.btn-gold:hover { color: #241c04; transform: translateY(-1px); box-shadow: 0 7px 20px rgba(201, 162, 39, .42); }
.btn-navy { background: var(--gk-navy); border: none; color: #fff; }
.btn-navy:hover { background: var(--gk-navy-2); color: #fff; }
.btn-soft { background: var(--gk-body); border: 1px solid var(--gk-line); color: var(--gk-text); }
.btn-soft:hover { background: #fff; border-color: var(--gk-gold-3); color: var(--gk-gold); }
.btn-outline-gold { border: 1px solid var(--gk-gold); color: var(--gk-gold); background: #fff; }
.btn-outline-gold:hover { background: var(--gk-gold-soft); color: #a4801a; }
.btn-sm { padding: .35rem .7rem; font-size: .78rem; border-radius: 8px; }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }

/* ---------- Forms ---------- */
.form-label { font-size: .78rem; font-weight: 700; color: var(--gk-navy); margin-bottom: .35rem; letter-spacing: .01em; }
.form-control, .form-select {
    border-radius: 10px; border: 1px solid var(--gk-line); padding: .58rem .8rem;
    font-size: .87rem; background: #fff; color: var(--gk-text);
}
.form-control:focus, .form-select:focus { border-color: var(--gk-gold-2); box-shadow: 0 0 0 3px rgba(201, 162, 39, .13); }
.form-control[readonly] { background: var(--gk-body); }
.input-group-text { background: var(--gk-body); border: 1px solid var(--gk-line); border-radius: 10px; font-size: .82rem; color: var(--gk-muted); }

/* ---------- Table ---------- */
.table { --bs-table-bg: transparent; margin: 0; font-size: .845rem; color: var(--gk-text); }
.table > thead th {
    background: var(--gk-body); color: var(--gk-muted); font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .09em; border-bottom: 1px solid var(--gk-line);
    padding: .8rem 1rem; white-space: nowrap;
}
.table > tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--gk-line); vertical-align: middle; }
.table > tbody tr:last-child td { border-bottom: 0; }
.table > tbody tr { transition: background .16s ease; }
.table > tbody tr:hover { background: var(--gk-gold-soft); }
.gk-mono { font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .8rem; }
.gk-price { color: #a4801a; font-weight: 800; }

/* DataTables tweaks */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 9px; border: 1px solid var(--gk-line); padding: .35rem .6rem; font-size: .82rem; outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--gk-gold-2); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: .8rem; color: var(--gk-muted); padding: .9rem 1.1rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important; border: 1px solid var(--gk-line) !important; margin: 0 2px; padding: .3rem .65rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--gk-gold) !important; border-color: var(--gk-gold) !important; color: #35290a !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--gk-gold-soft) !important; border-color: var(--gk-gold-3) !important; color: var(--gk-gold) !important;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { opacity: .35; }

/* ---------- Product card ---------- */
.gk-product {
    background: #fff; border: 1px solid var(--gk-line); border-radius: var(--gk-radius);
    overflow: hidden; transition: all .22s ease; height: 100%; cursor: pointer;
}
.gk-product:hover { transform: translateY(-4px); box-shadow: var(--gk-shadow-lg); border-color: var(--gk-gold-3); }
.gk-product-media {
    height: 120px; display: grid; place-items: center; font-size: 2.6rem;
    background: linear-gradient(135deg, var(--gk-cream), #fff 60%, var(--gk-gold-soft));
    position: relative;
}
.gk-product-media .gk-badge { position: absolute; top: .6rem; right: .6rem; }
.gk-product-body { padding: .9rem 1rem 1rem; }
.gk-product-body h6 { font-size: .87rem; margin: 0 0 .2rem; }
.gk-product-meta { font-size: .73rem; color: var(--gk-muted); }

/* ---------- Progress ---------- */
.progress { height: 7px; border-radius: 6px; background: var(--gk-body); }
.progress-bar { border-radius: 6px; }

/* ---------- Timeline ---------- */
.gk-timeline { position: relative; padding-left: 1.65rem; }
.gk-timeline::before { content: ''; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--gk-line); }
.gk-tl-item { position: relative; padding: 0 0 1.05rem .55rem; }
.gk-tl-item:last-child { padding-bottom: 0; }
.gk-tl-dot {
    position: absolute; left: -1.65rem; top: 0; width: 28px; height: 28px; border-radius: 9px;
    display: grid; place-items: center; font-size: .78rem; border: 3px solid #fff;
}
.gk-tl-time { font-size: .7rem; color: var(--gk-muted); font-weight: 700; letter-spacing: .04em; }
.gk-tl-text { font-size: .845rem; margin: .1rem 0 0; }

/* ---------- Quick actions ---------- */
.gk-quick {
    display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1rem .5rem;
    border-radius: var(--gk-radius-sm); border: 1px solid var(--gk-line); background: #fff;
    color: var(--gk-text); transition: all .2s ease; height: 100%; text-align: center;
}
.gk-quick:hover { border-color: var(--gk-gold-2); background: var(--gk-gold-soft); transform: translateY(-3px); color: var(--gk-navy); }
.gk-quick i { font-size: 1.35rem; }
.gk-quick span { font-size: .74rem; font-weight: 700; line-height: 1.25; }

/* ---------- Gold price monitor ---------- */
.gk-gold-monitor {
    background: linear-gradient(140deg, var(--gk-navy) 0%, #1b2743 55%, #23315a 100%);
    color: #fff; border: none;
}
.gk-gold-monitor::before {
    content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
    border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 39, .35), transparent 65%);
}
.gk-gold-monitor h5, .gk-gold-monitor .gk-stat-value { color: #fff; }
.gk-karat-row {
    display: flex; align-items: center; justify-content: space-between; padding: .7rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .12);
}
.gk-karat-row:last-child { border-bottom: 0; }
.gk-karat-tag {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    font-weight: 800; font-size: .82rem; background: rgba(201, 162, 39, .18); color: var(--gk-gold-2);
    border: 1px solid rgba(201, 162, 39, .35);
}

/* ---------- Barcode / QR preview ---------- */
.gk-barcode-box {
    background: #fff; border: 1px dashed var(--gk-line); border-radius: var(--gk-radius-sm);
    padding: 1rem; text-align: center;
}
.gk-qr-box {
    background: #fff; border: 1px solid var(--gk-line); border-radius: var(--gk-radius-sm);
    padding: .85rem; display: inline-block; box-shadow: var(--gk-shadow);
}
.gk-qr-box canvas, .gk-qr-box img { display: block; }

/* ==========================================================================
   Jewelry label — ukuran memakai satuan mm agar preview & hasil cetak
   berukuran fisik sesuai label asli.
   ========================================================================== */
.gk-label {
    width: var(--lb-w, 40mm);
    min-height: var(--lb-h, 25mm);
    background: #fff; border: 1px solid #d8d8d8; border-radius: 1mm;
    padding: 1mm 1.2mm; text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif; color: #111;
    display: flex; flex-direction: column; justify-content: center; gap: .3mm;
    page-break-inside: avoid; break-inside: avoid;
}
.gk-label .lb-store { font-size: 5pt; font-weight: 800; letter-spacing: .12em; }
.gk-label .lb-name  { font-size: 6pt; font-weight: 700; line-height: 1.1; }
.gk-label .lb-spec  { font-size: 5pt; color: #333; }
.gk-label .lb-price { font-size: 7pt; font-weight: 800; }
.gk-label .lb-code  { font-size: 5pt; letter-spacing: .08em; font-weight: 700; }
.gk-label svg, .gk-label canvas { display: block; margin: .4mm auto 0; max-width: 100%; }

/* ---- Jewelry tag "dumbbell": dililitkan ke cincin, dua sayap menyatu ---- */
.gk-tag {
    width: var(--tag-w, 66mm); height: var(--tag-h, 12mm);
    display: flex; align-items: stretch;
    font-family: 'Segoe UI', Arial, sans-serif; color: #111;
    page-break-inside: avoid; break-inside: avoid;
}
.gk-tag-wing {
    flex: 0 0 var(--wing-w, 26mm);
    background: #fff; border: 1px solid #d8d8d8; border-radius: 1.5mm;
    padding: .6mm .8mm; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2mm;
}
.gk-tag-neck {
    flex: 1 1 auto; align-self: center;
    height: var(--neck-h, 4mm); background: #fff;
    border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
    position: relative;
}
.gk-tag-neck::after {
    content: 'lilitkan ke cincin';
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 3.6pt; color: #b9b9b9; letter-spacing: .04em; white-space: nowrap;
}
.gk-tag .lb-store { font-size: 4.4pt; font-weight: 800; letter-spacing: .1em; }
.gk-tag .lb-name  { font-size: 5.2pt; font-weight: 700; line-height: 1.05; text-align: center; }
.gk-tag .lb-spec  { font-size: 4.4pt; color: #333; }
.gk-tag .lb-price { font-size: 6pt; font-weight: 800; }
.gk-tag .lb-code  { font-size: 4.2pt; letter-spacing: .06em; font-weight: 700; }
.gk-tag svg, .gk-tag canvas { display: block; margin: 0 auto; max-width: 100%; max-height: 100%; }

.gk-label-grid { display: flex; flex-wrap: wrap; gap: 3mm; }

/* Penggaris pembanding ukuran pada preview */
.gk-ruler {
    height: 5mm; border-left: 1px solid var(--gk-muted); border-right: 1px solid var(--gk-muted);
    border-bottom: 1px solid var(--gk-muted); position: relative; margin-top: 2mm;
}
.gk-ruler span {
    position: absolute; top: -1.5mm; left: 50%; transform: translateX(-50%);
    background: var(--gk-cream); padding: 0 1mm; font-size: .62rem; color: var(--gk-muted);
}

/* ---------- POS ---------- */
.gk-pos-item {
    display: flex; gap: .75rem; align-items: center; padding: .7rem; border: 1px solid var(--gk-line);
    border-radius: var(--gk-radius-sm); background: #fff; margin-bottom: .55rem;
}
.gk-pos-thumb {
    width: 46px; height: 46px; border-radius: 11px; flex: 0 0 46px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--gk-cream), var(--gk-gold-soft)); font-size: 1.25rem; color: var(--gk-gold);
}
.gk-scan-input {
    border: 2px dashed var(--gk-gold-2) !important; background: var(--gk-gold-soft) !important;
    font-family: 'JetBrains Mono', monospace; font-size: 1rem !important; letter-spacing: .08em; height: 52px;
}
.gk-scan-input:focus { background: #fff !important; box-shadow: 0 0 0 4px rgba(201, 162, 39, .16); }
.gk-total-row { display: flex; justify-content: space-between; padding: .38rem 0; font-size: .87rem; }
.gk-total-row.grand { border-top: 2px solid var(--gk-navy); margin-top: .5rem; padding-top: .7rem; font-size: 1.15rem; font-weight: 800; color: var(--gk-navy); }
.gk-empty { text-align: center; padding: 2.2rem 1rem; color: var(--gk-muted); }
.gk-empty i { font-size: 2.4rem; opacity: .3; display: block; margin-bottom: .5rem; }

/* ---------- Invoice ---------- */
.gk-invoice {
    background: #fff; border-radius: var(--gk-radius); border: 1px solid var(--gk-line);
    box-shadow: var(--gk-shadow); overflow: hidden;
}
.gk-invoice-head {
    padding: 1.6rem 1.9rem; border-bottom: 2px solid var(--gk-gold);
    background: linear-gradient(120deg, #fff 60%, var(--gk-gold-soft));
    display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
}
.gk-invoice-body { padding: 1.6rem 1.9rem; }
.gk-invoice-title { font-size: 1.45rem; letter-spacing: .06em; margin: 0; }
.gk-invoice-sub { font-size: .78rem; color: var(--gk-muted); margin: .1rem 0 0; }
.gk-invoice-meta { font-size: .8rem; }
.gk-invoice-meta dt { color: var(--gk-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.gk-invoice-meta dd { font-weight: 700; color: var(--gk-navy); margin-bottom: .55rem; }
.gk-invoice table th { background: var(--gk-navy); color: #fff; letter-spacing: .07em; }
.gk-stamp {
    display: inline-block; border: 3px solid var(--gk-green); color: var(--gk-green);
    padding: .3rem 1rem; border-radius: 8px; font-weight: 800; letter-spacing: .16em;
    transform: rotate(-6deg); font-size: 1.05rem;
}
.gk-stamp.cancelled { border-color: var(--gk-red); color: var(--gk-red); }
.gk-stamp.pending { border-color: var(--gk-orange); color: var(--gk-orange); }

/* ---------- Public verification ---------- */
.gk-verify-wrap { min-height: 100vh; background: linear-gradient(160deg, var(--gk-navy) 0%, #101a30 45%, #0b1223 100%); padding: 2.2rem 1rem 3rem; }
.gk-verify-card { max-width: 620px; margin: 0 auto; background: #fff; border-radius: 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); overflow: hidden; }
.gk-verify-hero { padding: 2rem 1.75rem 1.6rem; text-align: center; color: #fff; }
.gk-verify-hero.valid     { background: linear-gradient(135deg, #1c8f60, #22a06b); }
.gk-verify-hero.cancelled { background: linear-gradient(135deg, #c93c3c, #e14b4b); }
.gk-verify-hero.pending   { background: linear-gradient(135deg, #c9770a, #e2870c); }
.gk-verify-hero.notfound  { background: linear-gradient(135deg, #4a5468, #2b3245); }
.gk-verify-icon {
    width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .18);
    display: grid; place-items: center; font-size: 2.6rem; margin: 0 auto 1rem; border: 3px solid rgba(255, 255, 255, .4);
}
.gk-verify-status { font-size: 1.35rem; font-weight: 800; letter-spacing: .12em; margin: 0; color: #fff; }
.gk-verify-row { display: flex; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-bottom: 1px dashed var(--gk-line); font-size: .87rem; }
.gk-verify-row:last-child { border-bottom: 0; }
.gk-verify-row span:first-child { color: var(--gk-muted); }
.gk-verify-row span:last-child { font-weight: 700; color: var(--gk-navy); text-align: right; }

/* ---------- Login ---------- */
.gk-login { min-height: 100vh; display: flex; }
.gk-login-visual {
    flex: 1 1 52%; position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(150deg, #101a30 0%, var(--gk-navy) 40%, #23315a 100%);
    display: flex; flex-direction: column; justify-content: space-between; padding: 3rem;
}
.gk-login-visual::before {
    content: ''; position: absolute; width: 520px; height: 520px; right: -160px; top: -140px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 39, .32), transparent 62%);
}
.gk-login-visual::after {
    content: ''; position: absolute; width: 380px; height: 380px; left: -120px; bottom: -130px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 39, .18), transparent 65%);
}
.gk-login-form { flex: 1 1 48%; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--gk-cream); }
.gk-login-box { width: 100%; max-width: 400px; }
.gk-jewel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; position: relative; z-index: 2; max-width: 400px; }
.gk-jewel {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 162, 39, .28);
    border-radius: 16px; padding: 1.1rem; display: flex; align-items: center; gap: .8rem;
    backdrop-filter: blur(6px);
}
.gk-jewel i { font-size: 1.6rem; color: var(--gk-gold-2); }
.gk-jewel b { display: block; font-size: .84rem; }
.gk-jewel small { color: rgba(255, 255, 255, .5); font-size: .7rem; }

/* ---------- Misc ---------- */
.gk-divider { height: 1px; background: var(--gk-line); margin: 1rem 0; }
.gk-kv { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--gk-line); font-size: .845rem; }
.gk-kv:last-child { border-bottom: 0; }
.gk-kv span:first-child { color: var(--gk-muted); }
.gk-kv span:last-child { font-weight: 700; color: var(--gk-navy); text-align: right; }
.modal-content { border: none; border-radius: var(--gk-radius); box-shadow: var(--gk-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--gk-line); padding: 1.1rem 1.35rem; }
.modal-title { font-size: 1rem; }
.modal-body { padding: 1.35rem; }
.modal-footer { border-top: 1px solid var(--gk-line); padding: .9rem 1.35rem; }
.nav-pills .nav-link { border-radius: 9px; font-size: .84rem; font-weight: 600; color: var(--gk-muted); padding: .45rem .9rem; }
.nav-pills .nav-link.active { background: var(--gk-gold-soft); color: #a4801a; }
.gk-footer { padding: 1.1rem 1.5rem; border-top: 1px solid var(--gk-line); background: #fff; font-size: .78rem; color: var(--gk-muted); }
.gk-demo-ribbon {
    background: linear-gradient(90deg, var(--gk-gold-soft), #fff);
    border: 1px solid var(--gk-gold-3); border-radius: var(--gk-radius-sm);
    padding: .6rem .9rem; font-size: .78rem; color: #8a6a12; display: flex; gap: .55rem; align-items: center;
}
.swal2-popup { border-radius: var(--gk-radius) !important; font-family: inherit !important; }
.swal2-title { font-size: 1.15rem !important; color: var(--gk-navy) !important; }
.swal2-html-container { font-size: .88rem !important; }
.swal2-styled.swal2-confirm { background: linear-gradient(135deg, var(--gk-gold), var(--gk-gold-2)) !important; color: #35290a !important; border-radius: 10px !important; font-weight: 700 !important; }
.swal2-styled.swal2-cancel { border-radius: 10px !important; font-weight: 700 !important; }

/* ---------- Responsive ---------- */
.gk-backdrop { position: fixed; inset: 0; background: rgba(16, 26, 48, .45); z-index: 1035; display: none; }
body.gk-sidebar-open .gk-backdrop { display: block; }

@media (max-width: 1199.98px) {
    body.gk-collapsed .gk-sidebar { transform: translateX(-100%); }
    body.gk-collapsed .gk-main { margin-left: 0; }
}
@media (min-width: 1200px) {
    body.gk-collapsed .gk-sidebar { transform: translateX(-100%); }
    body.gk-collapsed .gk-main { margin-left: 0; }
}
@media (max-width: 991.98px) {
    .gk-sidebar { transform: translateX(-100%); }
    .gk-main { margin-left: 0; }
    body.gk-sidebar-open .gk-sidebar { transform: translateX(0); }
    .gk-content { padding: 1.1rem; }
    .gk-login { flex-direction: column; }
    .gk-login-visual { flex: none; padding: 2rem 1.5rem; }
    .gk-invoice-head, .gk-invoice-body { padding: 1.2rem; }
}
@media (max-width: 575.98px) {
    .gk-stat-value { font-size: 1.35rem; }
    .btn { padding: .6rem 1rem; }
    .gk-content { padding: .9rem; }
    .gk-page-head h1 { font-size: 1.22rem; }
    .table { font-size: .8rem; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    body { background: #fff !important; }
    .gk-sidebar, .gk-navbar, .gk-footer, .gk-backdrop, .no-print, .modal, .modal-backdrop,
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_info { display: none !important; }
    .gk-main { margin-left: 0 !important; }
    .gk-content { padding: 0 !important; }
    .gk-card, .gk-invoice { box-shadow: none !important; border: none !important; }

    /* Cetak hanya area yang ditandai */
    body.printing-area .print-hide { display: none !important; }
    body.printing-area #print-area { display: block !important; }

    #print-area { position: absolute; inset: 0; margin: 0; padding: 0; width: 100%; }
    .gk-label, .gk-tag-wing { border: 1px dotted #999 !important; }
    .gk-label-grid { gap: 2mm; }
    .gk-ruler { display: none !important; }
    @page { margin: 8mm; }
}

/* ---------- Print bridge (dipakai oleh GK.printHTML) ---------- */
#gk-print-root { display: none; }
@media print {
    body.gk-printing .gk-app { display: none !important; }
    body.gk-printing #gk-print-root { display: block !important; }
    body.gk-printing #gk-print-root .gk-label-grid { justify-content: flex-start; }
}

/* ---------- Label model "satu sayap + ekor" ---------- */
.gk-tag-wing.gk-tag-solo {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: .8mm; text-align: left;
}
.gk-tag-solo .solo-text {
    display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto;
}
.gk-tag-solo .solo-text .lb-name,
.gk-tag-solo .solo-text .lb-store { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gk-tag-solo .solo-code {
    display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; max-width: 55%;
}
.gk-tag-solo .solo-code .lb-code { font-size: 3.8pt; }

/* ==========================================================================
   Cetak invoice — dipadatkan agar muat satu halaman A4 tegak.
   Diaktifkan lewat GK.printInvoice(), yang memberi kelas .print-invoice
   pada wadah cetak sehingga tidak mengganggu pencetakan label barcode.
   ========================================================================== */
@media print {
    #gk-print-root.print-invoice { zoom: var(--inv-zoom, 1); }

    .print-invoice .gk-invoice { border: 0 !important; box-shadow: none !important; page-break-inside: avoid; break-inside: avoid; }
    .print-invoice .gk-invoice-head { padding: 5mm 6mm 3.5mm; }
    .print-invoice .gk-invoice-body { padding: 4mm 6mm 4mm; }

    .print-invoice .gk-brand-mark { width: 11mm !important; height: 11mm !important; flex: 0 0 11mm !important; font-size: 12pt !important; }
    .print-invoice .gk-invoice-title { font-size: 15pt; }
    .print-invoice .gk-invoice-sub { font-size: 7pt; }
    .print-invoice .gk-invoice-meta dt { font-size: 6.5pt; }
    .print-invoice .gk-invoice-meta dd { font-size: 8.5pt; margin-bottom: 1.5mm; }

    .print-invoice .table > thead th { padding: 1.6mm 2mm; font-size: 7pt; }
    .print-invoice .table > tbody td { padding: 1.8mm 2mm; font-size: 8.5pt; }

    .print-invoice .gk-kv { padding: 1.1mm 0; font-size: 8.5pt; }
    .print-invoice .gk-total-row { padding: 1.1mm 0; font-size: 8.5pt; }
    .print-invoice .gk-total-row.grand { font-size: 11.5pt; padding-top: 2mm; margin-top: 1.5mm; }

    .print-invoice .gk-qr-box { padding: 1.5mm; }
    .print-invoice .gk-qr-box svg { width: 26mm !important; height: 26mm !important; }
    .print-invoice .gk-stamp { font-size: 10pt; padding: 1mm 4mm; border-width: 2px; }
    .print-invoice .gk-demo-ribbon { font-size: 7pt; padding: 1.5mm 2.5mm; }

    /* Rapatkan jarak antarblok bawaan Bootstrap */
    .print-invoice .row.g-4 { --bs-gutter-y: 3mm; --bs-gutter-x: 4mm; }
    .print-invoice .mb-4 { margin-bottom: 3mm !important; }
    .print-invoice .mt-4 { margin-top: 3mm !important; }
    .print-invoice .mt-3 { margin-top: 2mm !important; }
    .print-invoice .pt-3 { padding-top: 2mm !important; }
}