@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root { --primary:#007c5a; --primary-dark:#00674b; --primary-soft:#dff8ef; --ink:#102a43; --muted:#708090; --line:#d8e4df; --canvas:#f7f9ff; --panel:#fff; --danger:#dc3545; --warning:#e89117; --success:#078a63; }
* { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; background:var(--canvas); color:var(--ink); font-family:Inter,Segoe UI,sans-serif; font-size:13px; }
a { color:inherit; text-decoration:none; }
.app-shell { height:100vh; display:flex; overflow:hidden; }
.sidebar { width:220px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; flex-shrink:0; padding:20px 13px; }
.brand { display:flex; align-items:center; gap:10px; padding:0 7px 24px; color:var(--primary-dark); font-size:20px; }
.brand-mark { align-items:center; background:#10bf83; border-radius:7px; color:#fff; display:inline-flex; font-size:19px; font-weight:800; height:31px; justify-content:center; width:31px; }
.brand small,.user-name small { color:var(--muted); display:block; font-size:9px; font-weight:500; margin-top:2px; }
.side-nav { display:grid; gap:5px; }
.side-nav a { align-items:center; border-radius:7px; color:#365166; display:flex; font-weight:500; gap:12px; min-height:39px; padding:0 11px; }
.side-nav a span { color:#153e54; font-size:17px; width:16px; }
.side-nav a:hover,.side-nav a.active { background:#13bd85; color:#fff; }
.side-nav a.active span { color:#fff; }
.sidebar-bottom { border-top:1px solid #e8eeeb; margin-top:auto; padding-top:15px; }
.new-transaction { display:block; margin-bottom:16px; width:100%; }
.logout-link { background:transparent; border:0; color:#455f71; cursor:pointer; font:inherit; padding:8px 11px; text-align:left; width:100%; }
.app-main { display:flex; flex:1; flex-direction:column; min-width:0; overflow-y:auto; }
.topbar { align-items:center; background:#fff; border-bottom:1px solid var(--line); display:flex; height:75px; justify-content:space-between; padding:0 32px; gap:10px; }
.mobile-menu-btn { display:none; background:transparent; border:none; font-size:22px; cursor:pointer; color:var(--primary-dark); padding:5px; }
.mobile-brand { display:none; color:var(--primary-dark); font-weight:800; font-size:16px; margin-right:auto; }

.topbar-actions { align-items:center; display:flex; gap:18px; margin-left:auto; }
.avatar { align-items:center; background:#d9f4e8; border:2px solid #fff; border-radius:50%; color:var(--primary-dark); display:flex; font-size:14px; font-weight:700; height:42px; justify-content:center; margin-left:8px; width:42px; }
.user-name { font-size:13px; font-weight:700; }
.main-content { flex:1; margin:0 auto; max-width:1320px; padding:24px 28px 32px; width:100%; }
.footer { background:#fff; border-top:1px solid var(--line); color:#8794a1; font-size:10px; padding:13px 28px; }
.page-header,.dashboard-header { align-items:center; display:flex; justify-content:space-between; margin-bottom:20px; }
.page-header h2,.dashboard-header h2 { color:#0d273d; font-size:21px; letter-spacing:-.4px; }
.page-description { color:#718394; font-size:11px; margin-top:5px; }
.dashboard-header p { color:#718394; font-size:11px; margin-top:4px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:18px; }
.card:hover { border-color:#b9d9cb; }
.grid-2,.grid-3,.grid-4 { display:grid; gap:14px; }.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.btn { border:1px solid transparent; border-radius:6px; cursor:pointer; display:inline-block; font:600 12px Inter,sans-serif; padding:10px 16px; text-align:center; transition:.2s; }
.btn-outline { background:#fff; border-color:#b8d0c5; color:var(--primary-dark); }.btn-sm { font-size:10px; padding:6px 10px; }
.btn-primary,.btn-success { background:var(--primary); color:#fff; }.btn-primary:hover,.btn-success:hover { background:var(--primary-dark); }.btn-danger { background:#ef5965; color:#fff; }.btn-info { background:#e5f4ee; color:var(--primary-dark); }
.form-group { margin-bottom:16px; }.form-group label { color:#264456; display:block; font-size:12px; font-weight:600; margin-bottom:7px; }.form-group input,.form-group select,.form-control { background:#fff; border:1px solid #cbdad4; border-radius:6px; font:inherit; padding:10px 12px; width:100%; }.form-group input:focus,.form-group select:focus { border-color:var(--primary); outline:2px solid #dff8ef; }
.table-container { overflow-x:auto; }.table-container table { border-collapse:separate; border-spacing:0; min-width:620px; width:100%; }.table-container th { background:#edf2ff; border-bottom:1px solid #d5dfeb; color:#526a7b; font-size:10px; letter-spacing:.3px; padding:12px 14px; text-align:left; text-transform:uppercase; }.table-container th:first-child { border-top-left-radius:6px; }.table-container th:last-child { border-top-right-radius:6px; }.table-container td { border-bottom:1px solid #e4ece8; padding:14px; }.table-container tr:last-child td { border-bottom:0; }.table-container tbody tr:hover { background:#fbfefc; }
.badge { border-radius:20px; font-size:10px; font-weight:700; padding:4px 8px; }.badge.success,.badge-primary { background:#dff8ef; color:#007954; }.badge.warning { background:#fff1d9; color:#bd7200; }.badge.danger { background:#fee5e7; color:#c42b3c; }.badge-secondary { background:#edf1f4; color:#5f6e7c; }
.stat-number { color:#0b2d44; font-size:22px; font-weight:800; margin:7px 0; }.stat-number.warning{color:#e14a47}.stat-number.danger{color:var(--danger)}.stat-trend { color:#768c9a; font-size:10px; }.stat-trend.positive { color:var(--success); }.stat-trend.danger { color:var(--danger); }.flex-between { align-items:center; display:flex; justify-content:space-between; margin-bottom:14px; }.chart-container { height:250px; margin-top:10px; }
.guest-page { background:linear-gradient(135deg,#e9f9f3 0%,#f8fbff 52%,#eef1ff 100%); }.guest-content { align-items:center; display:flex; justify-content:center; min-height:100vh; padding:25px; }
.alert { border-radius:7px; margin-bottom:16px; padding:11px 14px; }.alert-success { background:#e3f8ef; color:#047657; }.form-card { max-width:880px; }.form-grid { display:grid; gap:16px; grid-template-columns:repeat(2, 1fr); }.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }.error-text { color:#c42b3c; display:block; font-size:10px; margin-top:5px; }.initial-avatar,.profile-avatar { align-items:center; background:#dff8ef; border-radius:50%; color:var(--primary-dark); display:inline-flex; font-size:11px; font-weight:700; height:26px; justify-content:center; margin-right:7px; width:26px; }.status-dot { background:#19a776; border-radius:50%; display:inline-block; height:7px; margin-right:5px; width:7px; }.empty-cell { color:#778897; text-align:center; }.profile-layout { display:grid; gap:18px; grid-template-columns:260px minmax(0, 1fr); }.profile-summary { align-items:center; display:flex; flex-direction:column; height:max-content; text-align:center; }.profile-avatar { font-size:28px; height:86px; margin:5px 0 14px; width:86px; }.profile-summary h3 { font-size:18px; }.profile-summary p { color:#718394; font-size:11px; margin:6px 0 13px; }.form-card h3 { font-size:16px; margin-bottom:18px; }.form-section-title { border-top:1px solid var(--line); margin-top:5px; padding-top:20px; }
.login-container { align-items:center; display:flex; justify-content:center; min-height:100%; width:100%; }.login-box { background:#fff; border:1px solid #e0eae6; border-radius:10px; box-shadow:0 18px 45px rgba(25,84,65,.1); max-width:380px; padding:33px 34px; width:100%; }.login-logo { color:var(--primary-dark); font-size:31px; margin-bottom:10px; text-align:center; }.login-box h2 { color:var(--primary-dark); font-size:22px; text-align:center; }.login-subtitle { color:#748595; font-size:11px; margin:5px 0 25px; text-align:center; }.login-box .btn { margin-top:4px; width:100%; }.info-text { color:#788895; font-size:11px; margin-top:18px; text-align:center; }
.forgot-link { color:var(--primary); float:right; font-size:10px; font-weight:700; }.reset-box { max-width:440px; }.reset-box .alert { font-size:11px; }.code-request-form { border-bottom:1px solid var(--line); margin-bottom:19px; padding-bottom:17px; }.form-divider { color:#84929c; font-size:10px; margin:-7px 0 17px; text-align:center; }.form-divider span { background:#fff; padding:0 9px; }.readonly-notice { background:#edf8f3; border:1px solid #cce8dc; border-radius:6px; color:#176b52; font-size:11px; margin-bottom:16px; padding:11px 13px; }
.password-field { position:relative; }.password-field input { padding-right:82px; }.password-field button { background:transparent; border:0; color:var(--primary); cursor:pointer; font:700 10px Inter,sans-serif; padding:5px; position:absolute; right:7px; top:50%; transform:translateY(-50%); }
.inventory-form { max-width:980px; }.inventory-form h3 { font-size:15px; margin-bottom:16px; }.checkbox-field { align-items:center; display:flex; font-size:12px; font-weight:600; gap:8px; padding:10px 0; }.detail-grid { display:grid; gap:16px; grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); }.detail-table { border-collapse:collapse; width:100%; }.detail-table th { background:#f4f8f6; color:#466174; font-size:11px; text-align:left; width:42%; }.detail-table th,.detail-table td { border-bottom:1px solid var(--line); padding:11px; }.detail-table tr:last-child th,.detail-table tr:last-child td { border-bottom:0; }
@media(max-width:900px){.sidebar{width:180px}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.sidebar{position:fixed;left:-250px;top:0;height:100vh;z-index:999;transition:left 0.3s ease;box-shadow:2px 0 10px rgba(0,0,0,0.1)}.sidebar.open{left:0}.mobile-menu-btn{display:block}.topbar{padding:0 16px}.mobile-brand{display:block}.topbar-search{display:none}.user-name{display:none}.main-content{padding:18px 16px}.grid-2,.grid-3,.grid-4,.form-grid,.profile-layout,.detail-grid{grid-template-columns:1fr}.page-header,.dashboard-header{align-items:flex-start;gap:12px}.footer{padding:13px 16px}}

/* POS Styles */
.pos-container { display: flex; gap: 25px; min-height: 600px; }
.product-panel { flex: 2; overflow-y: auto; max-height: 700px; }
.pos-panel-title, .cart-title { align-items:center; display:flex; justify-content:space-between; gap:12px; }
.pos-panel-title h3, .cart-title h3 { color:#102a43; font-size:18px; }
.pos-panel-title p { color:#738596; font-size:11px; margin-top:4px; }
.pos-chip { background:#dff8ef; border-radius:5px; color:var(--primary-dark); font-size:10px; font-weight:700; padding:6px 8px; }
.cart-title { border-bottom:1px solid var(--line); margin:-18px -18px 0; padding:18px; }
.cart-title button { background:transparent; border:0; color:#d63a45; cursor:pointer; font:600 11px Inter,sans-serif; }
.cart-panel { flex: 1; display: flex; flex-direction: column; max-height: 700px; }
.search-bar { margin: 15px 0; }
.search-bar input { width: 100%; padding: 12px; border: 2px solid #dce1e6; border-radius: 8px; font-size: 16px; }
.category-filter { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
.product-item { border: 1px solid #eef2f7; padding: 15px; border-radius: 10px; text-align: center; transition: all 0.3s; position: relative; }
.product-item:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.product-name { font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.product-price { color: var(--success); font-weight: 700; font-size: 16px; }
.product-stock { font-size: 12px; color: var(--muted); margin: 5px 0; }
.btn-add { background: var(--primary); color: white; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 18px; cursor: pointer; transition: background 0.3s; position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; justify-content: center; }
.btn-add:hover { background: var(--primary-dark); }
.cart-items { flex: 1; overflow-y: auto; margin: 15px 0; }
.cart-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f5f9; align-items: center; }
.btn-remove { background: var(--danger); color: white; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer; margin-left: 10px; display: flex; align-items: center; justify-content: center; }
.cart-summary { border-top: 2px solid #eef2f7; padding-top: 15px; margin-top: 10px; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; }
.summary-row.total { font-size: 20px; font-weight: 700; color: var(--primary); border-top: 2px solid #dce1e6; padding-top: 15px; margin-top: 5px; }
.cart-actions { margin-top: 15px; }

/* Laporan & Dashboard Styles */
.filter-card { margin-bottom: 25px; padding: 20px; }
.filter-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; align-items: end; }
.filter-form .form-group { margin-bottom: 0; }
.filter-form .form-control { width: 100%; padding: 10px 12px; border: 1px solid #dce1e6; border-radius: 6px; }
.summary-cards { margin-bottom: 25px; }
.summary-card { display: flex; align-items: center; gap: 15px; padding: 20px; }
.summary-icon { font-size: 36px; background: #f0f7ff; width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.summary-content h4 { color: var(--muted); font-size: 14px; margin-bottom: 5px; }
.summary-value { font-size: 24px; font-weight: 700; color: var(--primary); }
.export-actions { display: flex; gap: 10px; margin-bottom: 20px; }
.badge.danger { background: #f8d7da; color: #721c24; }
.badge.warning { background: #fff3cd; color: #856404; }

@media (max-width: 768px) { 
    .pos-container { flex-direction: column; } 
    .product-panel, .cart-panel { flex: none; max-height: none; } 
    .filter-form { grid-template-columns: 1fr; }
}