/* RESET */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background: #f3f4f6;
    margin: 0;
}

/* LAYOUT */
.layout {
    display: flex;
    min-height: 100vh;
}


.sidebar h3 {
    margin-top: 0;
}

.sidebar a {
    display: block;
    color: #cbd5e1;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    transition: 0.2s;
}

.sidebar a:hover {
    background: #1f2937;
    color: #fff;
}

/* TOPBAR */
.topbar {
    background: #ffffff;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* CONTENT */
.content {
    flex: 1;
    padding: 30px;
}

/* CARD */
.card {
    background: #ffffff;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

/* BUTTON */
.btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: #4f46e5;
    color: #fff;
}

.btn-primary:hover {
    background: #4338ca;
}

.btn-danger {
    background: #dc2626;
    color: #fff;
}

.btn-danger:hover {
    background: #b91c1c;
}

/* BADGE */
.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-critical {
    background: #fee2e2;
    color: #991b1b;
}

/* DASHBOARD STATS */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: #ffffff;
    padding: 22px;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.06);
    transition: 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.stat-title {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 26px;
    font-weight: 600;
    color: #111827;
}

.stat-sub {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
}

/* TABLE STYLE */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.table th {
    background: #f9fafb;
    text-align: left;
    padding: 12px;
    font-size: 14px;
    color: #374151;
}

.table td {
    padding: 12px;
    border-top: 1px solid #f3f4f6;
    font-size: 14px;
}

.table tr:hover {
    background: #f9fafb;
}

/* FORM STYLE */
input, select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 12px;
    font-size: 14px;
}

input:focus, select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}

h2 {
    font-weight: 600;
    color: #111827;
}

small {
    font-size: 12px;
}

.card h3 {
    margin-bottom: 15px;
}

/* POS STYLE */
.pos-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.pos-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #111827;
    color: white;
    font-size: 18px;
    border-radius: 8px;
    margin-top: 16px;
}

.pos-total-label {
    font-size: 14px;
    opacity: 0.8;
}

.pos-total-value {
    font-size: 24px;
    font-weight: bold;
}

.btn-pay {
    background: #16a34a;
    color: #ffffff;
    font-size: 16px;
    padding: 12px;
    width: 100%;
    border-radius: 12px;
}

@keyframes fadeIn {
    from { opacity:0; transform:translateY(-5px); }
    to { opacity:1; transform:translateY(0); }
}

.btn-cancel {
    background: #ef4444;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 12px;
}

.btn-cancel:hover {
    opacity: 0.9;
}

/* FLASH MESSAGE */

.flash {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    animation: fadeIn 0.3s ease-in-out;
}

.flash-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #10b981;
}

.flash-error {
    background: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #ef4444;
}

/* FLASH MESSAGE SAAS STYLE */

.flash {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    border-radius:10px;
    margin-bottom:14px;
    font-size:14px;
    font-weight:500;
    animation: fadeIn 0.25s ease;
    transition: all 0.25s ease;
}

.flash-content {
    display:flex;
    align-items:center;
    gap:10px;
}

.flash i {
    font-size:16px;
}

.flash-close {
    background:none;
    border:none;
    cursor:pointer;
    font-size:14px;
    opacity:0.6;
}

.flash-close:hover {
    opacity:1;
}

.flash-success {
    background:#ecfdf5;
    border:1px solid #10b981;
    color:#065f46;
}

.flash-error {
    background:#fef2f2;
    border:1px solid #ef4444;
    color:#7f1d1d;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
    font-weight: 700;
}

/* FILTER BAR */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
}

.checkbox-wrap input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;                 /* penting */
    vertical-align: middle;    /* override default */
}

.variant-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #f1f5f9;
}

.variant-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.variant-stock {
    align-items: center;
}

.variant-actions {
    align-items: flex-end;
    gap: 8px;
}

.variant-min-form {
    display: flex;
    gap: 6px;
}

.variant-min-form input {
    width: 65px;
    height: 32px;
    padding: 0 8px;
}

.min-info {
    font-size: 12px;
    color: #94a3b8;
}

/* =========================
   VARIANT PREMIUM STYLE
========================= */

.variant-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.variant-row:hover {
    background: #f8fafc;
    border-radius: 10px;
}

.variant-left strong {
    font-size: 16px;
}

.variant-left small {
    color: #64748b;
}

.variant-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Badge style premium */
.badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: #ecfdf5;
    color: #047857;
}

.badge-warning {
    background: #fff7ed;
    color: #c2410c;
}

.badge-critical {
    background: #fef2f2;
    color: #b91c1c;
}

/* Button refinement */
.btn-sm {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 8px;
}

/* Minimum form */
.variant-min-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.variant-min-form input {
    width: 65px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 0 8px;
}

/* Subtle shadow for card */
.card {
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.variant-row-clean {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
}

.variant-name {
    font-weight: 600;
    font-size: 15px;
}

.variant-price {
    font-size: 13px;
    color: #64748b;
}

.variant-stock-clean {
    text-align: center;
}

.variant-actions-clean {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.min-inline input {
    width: 55px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-align: center;
}

.action-link {
    font-size: 13px;
    color: #6366f1;
    text-decoration: none;
}

.action-link:hover {
    text-decoration: underline;
}

.action-link.danger {
    color: #dc2626;
}


.variant-row-flat {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

.col-name {
    font-weight: 600;
}

.col-price {
    color: #64748b;
}

.col-stock {
    text-align: center;
}

.col-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.col-min {
    display: flex;
    align-items: center;
    justify-content: center;
}

.min-inline {
    display: flex;
    align-items: center;
}

.min-inline input {
    width: 55px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    position: relative;
    top: 8px;
}


.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.page-sub {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.page-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.status-toggle {
    display: flex;
    gap: 8px;
}

.toggle-btn {
    padding: 6px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    color: #334155;
}

.toggle-btn.active {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

.low-stock-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 13px;
}


.summary-box {
    display:flex;
    gap:20px;
    margin:15px 0;
}

.transaction-info {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
    margin-bottom:15px;
}

.void-reason{
background:#fff7ed;
border-left:4px solid #f97316;
padding:12px;
border-radius:6px;
margin:8px 0 15px 0;
font-size:14px;
}


.trx-filter {
    display: flex;
    align-items: flex-end; /* ini penting */
    gap: 20px;
    margin: 15px 0 20px 0;
    flex-wrap: wrap;
}

.trx-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trx-filter-group label {
    font-size: 13px;
    color: #64748b;
}

.trx-filter-group input {
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.trx-filter-action {
    display: flex;
    align-items: flex-end;
}

.trx-filter-action .btn {
    height: 38px; /* samakan tinggi dengan input */
    padding: 0 16px;
}

.trx-filter-group input {
    margin-bottom: 0; /* override global input */
}

/* TOAST */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 260px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 9999;
    animation: slideIn 0.3s ease-out;
}

.toast-success {
    background: #16a34a;
    color: #ffffff;
}

.toast-error {
    background: #dc2626;
    color: #ffffff;
}

@keyframes slideIn {
    from { opacity:0; transform:translateX(20px); }
    to { opacity:1; transform:translateX(0); }
}

.trial-banner {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}
.trial-banner a {
    color: #c2410c;
    font-weight: 600;
    margin-left: 8px;
    text-decoration: none;
}

.sidebar a.active {
    background: #4f46e5;
    color: #ffffff;
}

.sidebar-group {
    margin-bottom: 22px;
}

.sidebar-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6b7280;
    margin: 22px 0 10px 0;
    padding-left: 6px;
}

.sidebar a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    color: #cbd5e1;
    text-decoration: none;
    transition: 0.2s ease;
}

.sidebar a:hover {
    background: #1f2937;
    color: #fff;
}

.sidebar a.active {
    background: #4f46e5;
    color: #ffffff;
}

.sidebar a i {
    width: 20px;
    margin-right: 10px;
}

.sidebar.collapsed {
    width: 70px;
}

.sidebar.collapsed a {
    font-size: 0;
}

.sidebar.collapsed a i {
    font-size: 16px;
}

.sidebar-logo {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 30px;
}

/* ===== SIDEBAR STRUCTURE ===== */

.sidebar {
    width: 240px;
    background: #111827;
    transition: width 0.25s ease;
    overflow: hidden;

    padding: 24px 16px;   /* ini yang bikin nafas */
}

.sidebar.collapsed {
    width: 70px;
}

/* Logo */

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding-left: 4px;   /* biar tidak mentok */
}

.logo-icon {
    font-size: 18px;
}

.logo-text {
    font-size: 17px;
    font-weight: 600;
}

.sidebar.collapsed .logo-text {
    display: none;
}

/* Group Title */

.sidebar.collapsed .sidebar-title {
    display: none;
}

/* Menu Text */

.sidebar a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    position: relative;
}

.sidebar a i {
    width: 22px;
    text-align: center;
}

.sidebar a .menu-text {
    margin-left: 10px;
}

.sidebar.collapsed .menu-text {
    display: none;
}

/* Tooltip */

.sidebar.collapsed a::after {
    content: attr(data-label);
    position: absolute;
    left: 75px;
    background: #111827;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.sidebar.collapsed a:hover::after {
    opacity: 1;
}


@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -240px;
        top: 0;
        height: 100%;
        z-index: 1000;
    }

    .sidebar.mobile-open {
        left: 0;
    }
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    flex-shrink: 0;
}

.badge-pending {
    background:#fef3c7;
    color:#92400e;
}

.flash {
    transition: opacity 0.3s ease, transform 0.3s ease;
}


/* PRODUCT HEADER */

.product-header {

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.product-header-left {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.product-header-right {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}

.product-actions {
    display:flex;
    gap:10px;
}

.product-title {
    margin:0;
    font-size:20px;
}

.product-meta {
    font-size:13px;
    color:#64748b;
}

.back-link {
    font-size:13px;
    color:#6366f1;
    text-decoration:none;
}


/* =========================
VARIANT TABLE STYLE
========================= */

.variant-header {

    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;

    font-size:13px;
    color:#64748b;

    padding-bottom:10px;
    border-bottom:1px solid #e5e7eb;

    margin-bottom:10px;
}


.variant-row {

    display:grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #f1f5f9;
}


.variant-name {

    font-weight:500;

}


.variant-price {

    color:#475569;

}


.variant-stock {
    display:flex;
    align-items:center;
}

.variant-min {
    display:flex;
    align-items:center;
}


.variant-actions {

    display:flex;
    gap:14px;

}


.min-inline input {

    width:60px;
    height:30px;

    text-align:center;

    border:1px solid #e2e8f0;
    border-radius:6px;

}



/* =========================
PRODUCT HEADER
========================= */

.product-header-info {

    margin-bottom:10px;

}

.product-title {

    margin:0;
    font-size:20px;
    font-weight:600;

}

.product-meta {

    font-size:13px;
    color:#64748b;

}


/* =========================
ACTIONS LEFT
========================= */

.product-actions-left {

    display:flex;
    align-items:center;
    gap:12px;

}


/* =========================
BACK LINK
========================= */

.back-link {

    text-decoration:none;
    font-size:14px;
    color:#6366f1;

}


/* =========================
SMALL BUTTON (REFINED)
========================= */

.btn-sm {

    padding:6px 16px;   /* lebih panjang horizontal */

    height:32px;        /* tinggi konsisten */

    font-size:13px;

    border-radius:8px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

}


/* =========================
PRODUCT STATUS
========================= */

.product-status {

    font-size:12px;
    font-weight:500;

    margin-left:10px;

}

.product-status.active {

    color:#16a34a;

}

.product-status.inactive {

    color:#ef4444;

}


/* =========================
SUCCESS BUTTON
========================= */

.btn-success {

    background:#16a34a;
    color:#ffffff;

}

.btn-success:hover {

    background:#15803d;

}

.action-link.disabled {

    color:#94a3b8;
    pointer-events:none;

}

/* =========================
PRODUCT DISABLED NOTICE
========================= */

.product-disabled-notice {

    background:#fff7ed;
    border:1px solid #fed7aa;

    color:#9a3412;

    padding:10px 14px;

    border-radius:8px;

    font-size:13px;

    margin-bottom:12px;

}


/* =========================
POS QTY CONTROL
========================= */

.qty-control {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

}

.qty-btn {

    width: 28px;
    height: 28px;

    border-radius: 6px;
    border: 1px solid #e5e7eb;

    background: #f9fafb;

    cursor: pointer;

    font-size: 15px;
    font-weight: 600;

    line-height: 1;

}

.qty-btn:hover {

    background: #eef2ff;
    border-color: #6366f1;

}

.qty-input {

    width: 55px;
    height: 28px;

    text-align: center;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    font-size: 14px;

    padding: 0;

    margin: 0;

}

.variant-disabled {
    color: #9ca3af;
    font-size: 12px;
    margin-left: 6px;
}

.action-link.success {
    color: #16a34a;
}

.action-link.success:hover {
    text-decoration: underline;
}

.variant-row.inactive {
    opacity: 0.6;
}

#search-result {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:6px;
    margin-top:6px;
}

.search-item {
    padding:10px;
    cursor:pointer;
    border-bottom:1px solid #f1f5f9;
}

.search-item:hover {
    background:#f9fafb;
}

/* ======================
   TIER PRICE
====================== */

.tier-price-list{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.tier-badge{
    font-size:11px;
    background:#eef2ff;
    color:#4338ca;
    padding:3px 6px;
    border-radius:4px;
}

/* =========================
TIER INLINE FORM
========================= */

.tier-inline{
    margin-top:6px;
    display:flex;
    gap:6px;
    align-items:center;
}

.tier-inline input{
    width:70px;
    padding:4px;
    font-size:12px;
}

.btn-xs{
    padding:4px 8px;
    font-size:12px;
}

.price-normal{
    font-weight:500;
}

.tier-price-list{
    margin-top:4px;
    font-size:12px;
    color:#6366f1;
}

.tier-line{
    line-height:1.3;
}

/* =========================
TIER ACTIVE BADGE POS
========================= */

.tier-active{
    font-size:11px;
    color:#059669;
    margin-top:3px;
}

.scan-error{
    background:#fee2e2;
    color:#b91c1c;
    padding:6px 10px;
    border-radius:6px;
    margin-bottom:8px;
    font-size:13px;
}

.product-name{
    font-weight:600;
}

.product-meta{
    font-size:12px;
    color:#64748b;
}

.table td{
    padding:16px 14px;
}

.variant-create-row{

display:grid;

grid-template-columns:
1.3fr
1.4fr
1fr
1fr
1fr
40px;

gap:10px;

align-items:center;

margin-bottom:10px;

}

/* =========================
CREATE PRODUCT OPTIONS
========================= */

.create-options{

margin-top:14px;

display:flex;
align-items:center;

}

.stay-option{

display:flex;
align-items:center;
gap:8px;

font-size:14px;
color:#374151;

cursor:pointer;

}

.stay-option input{

width:16px;
height:16px;

margin:0;

}

.stay-option input:not(:checked) + span{
opacity:0.7;
}

/* =========================
CREATE PRODUCT CHECKBOX FIX
========================= */

.create-options{
    margin-top:16px;
}

.stay-option{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#374151;
}

.stay-option input[type="checkbox"]{
    width:16px;
    height:16px;
    margin:0;
}

/* =========================
VARIANT CONTROL
========================= */

.variant-controls{

margin-top:10px;
margin-bottom:14px;

}

/* =========================
FORM OPTIONS
========================= */

.form-options{

border-top:1px solid #f1f5f9;
padding-top:12px;
margin-top:10px;

}

/* =========================
FORM ACTIONS
========================= */

.form-actions{

margin-top:14px;

}

/* =========================
REMOVE VARIANT BUTTON
========================= */

.remove-variant{

display:flex;
align-items:center;
justify-content:center;

height:36px;

background:#fee2e2;
color:#991b1b;

border:none;

border-radius:6px;

cursor:pointer;

font-size:14px;

}

.remove-variant:hover{
background:#fecaca;
}

/* =========================
INPUT ERROR
========================= */

.input-error{

border:1px solid #ef4444;
background:#fef2f2;

}

.input-error{
border:1px solid #ef4444;
background:#fef2f2;
animation: shake 0.2s 2;
}

@keyframes shake{

0%{transform:translateX(0)}
25%{transform:translateX(-2px)}
50%{transform:translateX(2px)}
75%{transform:translateX(-2px)}
100%{transform:translateX(0)}

}


.hero{
padding:80px 20px;
text-align:center;
background:#eef2ff;
}

.hero h1{
font-size:40px;
margin-bottom:10px;
}

.hero p{
font-size:18px;
color:#64748b;
margin-bottom:20px;
}

.hero-actions{
display:flex;
gap:12px;
justify-content:center;
}

.section{
padding:60px 20px;
text-align:center;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.feature-card{
background:#fff;
padding:20px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.steps{
display:flex;
gap:30px;
justify-content:center;
margin-top:20px;
}

.step{
background:#fff;
padding:16px 22px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.topbar-user{
display:flex;
align-items:center;
gap:10px;
}

.user-avatar{
width:34px;
height:34px;
background:#6366f1;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
font-size:14px;
}

.user-info{
display:flex;
flex-direction:column;
line-height:1.1;
}

.user-name{
font-size:14px;
font-weight:500;
}

.user-role{
font-size:12px;
color:#64748b;
}

/* =========================
TOPBAR USER
========================= */

.topbar-right{
display:flex;
align-items:center;
gap:12px;
}

.topbar-user{
display:flex;
align-items:center;
gap:6px;
font-size:14px;
}

.user-name{
font-weight:500;
}

.badge-role{
background:#eef2ff;
color:#4338ca;
font-size:12px;
padding:3px 8px;
border-radius:6px;
}

.topbar-right{
display:flex;
align-items:center;
gap:14px;
}

.topbar-user{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
}

.user-avatar{
width:30px;
height:30px;
border-radius:50%;
background:#6366f1;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
font-size:13px;
}

.user-name{
font-weight:500;
}

.badge-role{
background:#eef2ff;
color:#4338ca;
font-size:12px;
padding:3px 8px;
border-radius:6px;
}

.store-info{
display:flex;
align-items:center;
gap:8px;
}

.store-name{
font-weight:600;
}

/* =========================
TOPBAR STRUCTURE
========================= */

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 18px;
background:#fff;
border-bottom:1px solid #e5e7eb;
}

.topbar-left{
display:flex;
align-items:center;
gap:10px;
}

.topbar-right{
display:flex;
align-items:center;
gap:16px;
}

/* =========================
STORE INFO
========================= */

.store-info{
display:flex;
align-items:center;
gap:8px;
}

.store-name{
font-weight:600;
}

/* =========================
USER INFO
========================= */

.topbar-user{
display:flex;
align-items:center;
gap:8px;
}

.user-avatar{
width:30px;
height:30px;
border-radius:50%;
background:#6366f1;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
font-size:13px;
}

.user-name{
font-weight:500;
}

.badge-role{
background:#eef2ff;
color:#4338ca;
font-size:12px;
padding:3px 8px;
border-radius:6px;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width:900px){

.store-name{
max-width:140px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

}

@media (max-width:700px){

.plan-badge{
display:none;
}

.user-name{
display:none;
}

}

@media (max-width:500px){

.store-name{
max-width:100px;
}

}

.trx-filter-group select {
height:38px;
padding:0 10px;
border:1px solid #e2e8f0;
border-radius:8px;
margin-bottom:0;
}

.void-form{
display:flex;
align-items:center;
gap:10px;
margin-top:12px;
}

.void-form input{
width:220px;
margin:0;
}

.trx-action{
display:flex;
align-items:center;
gap:12px;
margin-top:20px;
}

.void-form{
display:flex;
align-items:center;
gap:10px;
margin:0;
}

.void-input{
height:36px;
padding:0 10px;
border:1px solid #e5e7eb;
border-radius:8px;
margin:0;
}

.hero{
padding:100px 20px;
text-align:center;
background:#f9fafb;
}

.hero h1{
font-size:40px;
margin-bottom:10px;
}

.hero p{
font-size:16px;
color:#64748b;
max-width:600px;
margin:auto;
margin-bottom:25px;
}

.hero-actions{
display:flex;
justify-content:center;
gap:12px;
}

.section{
padding:70px 20px;
text-align:center;
}

.section-title{
font-size:26px;
margin-bottom:35px;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
max-width:900px;
margin:auto;
}

.feature-card{
background:#ffffff;
padding:25px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.feature-card h3{
margin-bottom:10px;
}

.steps{
max-width:600px;
margin:auto;
display:flex;
flex-direction:column;
gap:20px;
text-align:left;
}

.step{
display:flex;
gap:15px;
align-items:flex-start;
}

.step-number{
width:30px;
height:30px;
background:#4f46e5;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}

.cta-section{
background:#f9fafb;
}

.pos-mode{
display:flex;
gap:6px;
margin-bottom:8px;
}

.mode-btn{
padding:4px 10px;
border:1px solid #e5e7eb;
border-radius:6px;
background:#f9fafb;
cursor:pointer;
font-size:12px;
}

.mode-btn.active{
background:#6366f1;
color:white;
border-color:#6366f1;
}

.search-item.active{
background:#eef2ff;
border-left:3px solid #6366f1;
}