:root {
--primary-color: #134e4a;
--primary-light: #165a56;
--primary-dark: #0f423e;
--secondary-color: #06b6d4;
--accent-color: #14b8a6;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--dark-color: #1e293b;
--light-color: #f8fafc;
--white: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.1);
--card-hover-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f1f5f9;
color: var(--dark-color);
overflow-x: hidden;
padding-bottom: 60px;
}
/* Processing Overlay - Baru */
.processing-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.processing-overlay.active {
opacity: 1;
visibility: visible;
}
.processing-content {
text-align: center;
color: white;
}
.processing-spinner {
width: 60px;
height: 60px;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
margin: 0 auto 20px;
}
.processing-text {
font-size: 18px;
font-weight: 500;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Header */
.app-header {
background-color: var(--primary-color);
color: var(--white);
padding: 12px 15px;
display: flex;
align-items: center;
box-shadow: 0 2px 8px rgba(19, 78, 74, 0.3);
position: sticky;
top: 0;
z-index: 100;
}
.header-logo {
width: 32px;
height: 32px;
background-color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
overflow: hidden;
}
.header-logo i {
color: var(--primary-color);
font-size: 20px;
}
.header-title {
flex: 1;
}
.header-title h1 {
font-size: 18px;
font-weight: 700;
margin: 0;
}
.header-subtitle {
font-size: 12px;
opacity: 0.9;
}
.header-actions {
display: flex;
gap: 15px;
}
.header-action {
color: var(--white);
font-size: 20px;
position: relative;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
background-color: var(--danger-color);
color: var(--white);
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.cart-badge {
position: absolute;
top: -5px;
right: -5px;
background-color: var(--warning-color);
color: var(--white);
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
}
/* Header Navigation - Only Icons */
.header-nav {
display: flex;
gap: 15px;
margin-right: 10px;
}
.header-nav-item {
color: var(--white);
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
transition: all 0.2s;
}
.header-nav-item.active {
font-weight: bold;
}
.header-nav-item i {
font-size: 20px;
margin-bottom: 2px;
}
/* Search Bar */
.search-container {
padding: 10px 15px;
background-color: var(--primary-color);
display: none;
}
.search-box {
position: relative;
background-color: var(--white);
border-radius: 8px;
display: flex;
align-items: center;
padding: 8px 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.search-box i {
color: #64748b;
margin-right: 8px;
}
.search-box input {
border: none;
outline: none;
flex: 1;
font-size: 14px;
}
/* Banner */
.banner-container {
padding: 10px 15px;
background-color: var(--white);
margin-bottom: 15px;
}
.banner {
height: 120px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light), var(--accent-color));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
text-align: center;
padding: 15px;
box-shadow: 0 4px 12px rgba(19, 78, 74, 0.3);
}
.banner-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 5px;
}
.banner-subtitle {
font-size: 14px;
opacity: 0.9;
}
/* Settings Banner */
.settings-banner {
background-color: var(--white);
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
box-shadow: var(--card-shadow);
display: flex;
align-items: center;
}
.settings-banner-logo {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
margin-right: 15px;
background-color: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
}
.settings-banner-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.settings-banner-info {
flex: 1;
}
.settings-banner-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
color: var(--dark-color);
}
.settings-banner-subtitle {
font-size: 14px;
color: #64748b;
margin-bottom: 2px;
}
.settings-banner-address {
font-size: 12px;
color: #64748b;
display: flex;
align-items: center;
}
.settings-banner-address i {
margin-right: 5px;
font-size: 14px;
}
/* Dashboard Stats */
.dashboard-stats {
padding: 0 15px 15px;
}
.stat-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.stat-card {
flex: 1;
background: var(--white);
border-radius: 12px;
padding: 15px;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--card-hover-shadow);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.stat-card.water::before {
background-color: var(--secondary-color);
}
.stat-card.sales::before {
background-color: var(--primary-color);
}
.stat-card.debt::before {
background-color: var(--warning-color);
}
.stat-card.growth::before {
background-color: var(--success-color);
}
.stat-icon { width: 140px; height: 140px; border-radius: 50%; display: flex ; align-items: center; justify-content: center; margin-bottom: 10px; position: absolute; right: -40px; top: -5px; }
.stat-icon.water {
background-color: rgba(6, 182, 212, 0.1);
color: var(--secondary-color);
}
.stat-icon.sales {
background-color: rgba(19, 78, 74, 0.1);
color: var(--primary-color);
}
.stat-icon.debt {
background-color: rgba(245, 158, 11, 0.1);
color: var(--warning-color);
}
.stat-icon.growth {
background-color: rgba(16, 185, 129, 0.1);
color: var(--success-color);
}
.stat-value {
font-size: 18px;
font-weight: 700;
margin-bottom: 4px;
}
.stat-label {
font-size: 12px;
color: #64748b;
}
.stat-change {
font-size: 11px;
margin-top: 5px;
display: flex;
align-items: center;
}
.stat-change.positive {
color: var(--success-color);
}
.stat-change.negative {
color: var(--danger-color);
}
/* Financial Summary */
.financial-summary {
padding: 0 15px 15px;
}
.summary-card {
background: var(--white);
border-radius: 12px;
padding: 15px;
box-shadow: var(--card-shadow);
}
.summary-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.summary-period {
font-size: 12px;
color: #64748b;
font-weight: 400;
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.summary-label {
font-size: 14px;
color: #64748b;
}
.summary-value {
font-size: 14px;
font-weight: 500;
}
.summary-total {
border-top: 1px dashed #e2e8f0;
padding-top: 10px;
margin-top: 5px;
}
.summary-total .summary-label {
font-weight: 700;
color: var(--dark-color);
}
.summary-total .summary-value {
font-weight: 700;
color: var(--primary-color);
font-size: 16px;
}
/* Sales Chart */
.sales-chart {
padding: 0 15px 15px;
}
.chart-card {
background: var(--white);
border-radius: 12px;
padding: 15px;
box-shadow: var(--card-shadow);
}
.chart-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.chart-period {
font-size: 12px;
color: #64748b;
font-weight: 400;
}
.chart-container {
height: 150px;
position: relative;
margin-bottom: 10px;
}
.chart-bars {
display: flex;
align-items: flex-end;
height: 100%;
justify-content: space-between;
padding: 0 5px;
}
.chart-bar {
width: 12%;
background: linear-gradient(to top, var(--primary-color), var(--accent-color));
border-radius: 4px 4px 0 0;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.chart-bar:hover {
transform: translateY(-5px);
}
.chart-bar::after {
content: attr(data-value);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 500;
}
.chart-bar::before {
content: attr(data-percentage);
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-weight: 500;
color: var(--primary-color);
white-space: nowrap;
}
.chart-labels {
display: flex;
justify-content: space-between;
padding: 0 5px;
margin-top: 20px;
}
.chart-label {
font-size: 10px;
color: #64748b;
text-align: center;
width: 12%;
}
/* Top Products - Modified to show max 3 products with ranking */
.top-products {
padding: 0 15px 15px;
}
.products-card {
background: var(--white);
border-radius: 12px;
padding: 15px;
box-shadow: var(--card-shadow);
}
.top-product-list {
list-style: none;
padding: 0;
margin: 0;
}
.top-product-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f1f5f9;
}
.top-product-item:last-child {
border-bottom: none;
}
.product-rank {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-right: 12px;
flex-shrink: 0;
color: white;
}
.product-rank.first {
background-color: #FFD700; /* Gold */
}
.product-rank.second {
background-color: #C0C0C0; /* Silver */
}
.product-rank.third {
background-color: #CD7F32; /* Bronze */
}
.product-info {
flex: 1;
}
.product-name {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.product-sales {
font-size: 12px;
color: #64748b;
}
.product-percentage {
    font-size: x-large;
    color: #009688;
    font-weight: 500;
    position: relative;
    text-align: right;
    top: -40px;
    margin-bottom: -45px;
}
/* Active Customers */
.active-customers {
padding: 0 15px 15px;
}
.customers-card {
background: var(--white);
border-radius: 12px;
padding: 15px;
box-shadow: var(--card-shadow);
}
.customer-item {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
}
.customer-item:last-child {
border-bottom: none;
}
.customer-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
color: #64748b;
font-weight: 700;
flex-shrink: 0;
}
.customer-info {
flex: 1;
}
.customer-name {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
cursor: pointer;
}
.customer-name:hover {
color: var(--primary-color);
text-decoration: underline;
}
.customer-stats {
font-size: 12px;
color: #64748b;
}
.customer-value {
font-size: 14px;
font-weight: 700;
color: var(--primary-color);
}
.customer-percentage {
font-size: 11px;
color: var(--primary-color);
font-weight: 500;
}
/* Recent Transactions */
.recent-transactions {
padding: 0 15px 15px;
}
.transactions-card {
background: var(--white);
border-radius: 12px;
padding: 15px;
box-shadow: var(--card-shadow);
}
.transaction-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f1f5f9;
}
.transaction-item:last-child {
border-bottom: none;
}
.transaction-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
}
.transaction-icon.sales {
background-color: rgba(19, 78, 74, 0.1);
color: var(--primary-color);
}
.transaction-icon.payment {
background-color: rgba(16, 185, 129, 0.1);
color: var(--success-color);
}
.transaction-info {
flex: 1;
}
.transaction-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.transaction-date {
font-size: 12px;
color: #64748b;
}
.transaction-amount {
font-size: 14px;
font-weight: 700;
color: var(--dark-color);
}
.transaction-percentage {
font-size: 11px;
color: var(--primary-color);
font-weight: 500;
}
.transaction-status {
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
margin-top: 4px;
display: inline-block;
}
.status-lunas {
background-color: rgba(16, 185, 129, 0.1);
color: var(--success-color);
}
.status-hutang {
background-color: rgba(239, 68, 68, 0.1);
color: var(--danger-color);
}
.status-manual {
background-color: rgba(6, 182, 212, 0.1);
color: var(--secondary-color);
}
.transaction-actions {
display: flex;
gap: 8px;
}
.transaction-action {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
cursor: pointer;
transition: all 0.2s;
}
.transaction-action:hover {
background-color: var(--primary-color);
color: var(--white);
}
/* Section */
.section {
margin-bottom: 15px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px 10px;
}
.section-title {
font-size: 16px;
font-weight: 700;
color: var(--dark-color);
}
.section-action {
font-size: 12px;
color: var(--primary-color);
}
/* Bottom Navigation - Icons above and titles below */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: var(--white);
display: flex;
justify-content: space-around;
box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
z-index: 100;
}
.nav-item {
flex: 1;
text-align: center;
padding: 8px 0;
color: #64748b;
text-decoration: none;
transition: color 0.2s;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-item.active {
color: var(--primary-color);
}
.nav-icon {
font-size: 20px;
margin-bottom: 0px;
}
.nav-label {
font-size: 10px;
}
/* Floating Action Button */
.fab {
position: fixed;
bottom: 70px;
right: 15px;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--primary-color);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 5px rgba(19, 78, 74, 0.3);
font-size: 24px;
z-index: 99;
}
/* Tab Content */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Cashier Style */
.cashier-container {
background-color: var(--white);
border-radius: 12px;
box-shadow: var(--card-shadow);
overflow: hidden;
margin: 15px; /* Changed from 0 15px 15px to 15px */
}
.cashier-header {
background-color: var(--primary-color);
color: var(--white);
padding: 12px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cashier-title {
font-size: 16px;
font-weight: 700;
}
.cashier-date {
font-size: 12px;
opacity: 0.9;
}
.cashier-body {
padding: 15px;
}
.customer-selector {
margin-bottom: 15px;
}
.customer-input-container {
position: relative;
}
.customer-search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--white);
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
max-height: 200px;
overflow-y: auto;
z-index: 50;
display: none;
}
.customer-search-results.show {
display: block;
}
.customer-search-item {
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.2s;
}
.customer-search-item:hover {
background-color: #f1f5f9;
}
.customer-search-item.selected {
background-color: rgba(19, 78, 74, 0.1);
}
.product-selector {
margin-bottom: 15px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.product-item {
background-color: #f8fafc;
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.product-item:hover {
background-color: #f1f5f9;
transform: translateY(-2px);
}
.product-item.selected {
background-color: rgba(19, 78, 74, 0.1);
border: 1px solid var(--primary-color);
}
.product-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 5px;
}
.product-name {
font-size: 12px;
font-weight: 500;
margin-bottom: 2px;
}
.product-price {
font-size: 12px;
color: var(--primary-color);
font-weight: 700;
}
.product-quantity-badge {
position: absolute;
bottom: -5px;
right: -5px;
background-color: var(--warning-color);
color: var(--white);
border-radius: 50%;
width: 28px;
height: 28px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.cart-items {
margin-bottom: 15px;
}
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
}
.cart-item:last-child {
border-bottom: none;
}
.cart-item-info {
flex: 1;
}
.cart-item-name {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.cart-item-price {
font-size: 12px;
color: #64748b;
}
.cart-item-quantity {
display: flex;
align-items: center;
margin-right: 10px;
}
.quantity-btn {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--primary-color);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
}
.quantity-value {
margin: 0 10px;
font-weight: 500;
}
.cart-item-total {
font-size: 14px;
font-weight: 700;
color: var(--primary-color);
}
.cart-summary {
background-color: #f8fafc;
border-radius: 8px;
padding: 10px;
margin-bottom: 15px;
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.summary-row.total {
font-weight: 700;
font-size: 16px;
color: var(--primary-color);
border-top: 1px dashed #cbd5e1;
padding-top: 5px;
margin-top: 5px;
}
.payment-method {
margin-bottom: 15px;
}
.payment-options {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.payment-option {
flex: 1;
padding: 8px;
border-radius: 8px;
background-color: #f8fafc;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.payment-option:hover {
background-color: #f1f5f9;
}
.payment-option.selected {
background-color: var(--primary-color);
color: var(--white);
}
.manual-payment-container {
display: none;
margin-bottom: 15px;
}
.due-date-container {
display: none;
margin-bottom: 15px;
}
.action-buttons {
display: flex;
gap: 10px;
}
.action-buttons .btn {
flex: 1;
}
/* Water Stock Report */
.water-stock-report {
margin-bottom: 15px;
}
.report-card {
background: var(--white);
border-radius: 12px;
padding: 15px;
box-shadow: var(--card-shadow);
margin-bottom: 15px;
}
.report-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.report-period {
font-size: 12px;
color: #64748b;
font-weight: 400;
}
.stock-history {
margin-bottom: 15px;
}
.stock-history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
}
.stock-history-item:last-child {
border-bottom: none;
}
.stock-history-info {
flex: 1;
}
.stock-history-date {
font-size: 12px;
color: #64748b;
margin-bottom: 2px;
}
.stock-history-desc {
font-size: 14px;
font-weight: 500;
}
.stock-history-amount {
font-size: 14px;
font-weight: 700;
}
.stock-history-amount.positive {
color: var(--success-color);
}
.stock-history-amount.negative {
color: var(--danger-color);
}
/* Settings Edit */
.settings-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #f1f5f9;
}
.settings-item:last-child {
border-bottom: none;
}
.settings-label {
font-size: 14px;
color: var(--dark-color);
}
.settings-value-container {
display: flex;
align-items: center;
}
.settings-value {
font-size: 14px;
color: #64748b;
margin-right: 10px;
}
.settings-edit-btn {
background: none;
border: none;
color: var(--primary-color);
cursor: pointer;
font-size: 14px;
}
/* Notification Dropdown */
.notification-dropdown {
position: absolute;
top: 100%;
right: 0;
background-color: var(--white);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
width: 320px;
max-height: 400px;
overflow-y: auto;
z-index: 1000;
display: none;
}
.notification-dropdown.show {
display: block;
}
.notification-dropdown-header {
padding: 12px 15px;
border-bottom: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.notification-dropdown-title {
font-size: 14px;
font-weight: 700;
}
.notification-dropdown-clear {
font-size: 12px;
color: var(--primary-color);
cursor: pointer;
}
.notification-dropdown-body {
padding: 0;
}
.notification-dropdown-item {
padding: 12px 15px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: background-color 0.2s;
}
.notification-dropdown-item:hover {
background-color: #f8fafc;
}
.notification-dropdown-item:last-child {
border-bottom: none;
}
.notification-dropdown-empty {
padding: 20px 15px;
text-align: center;
color: #64748b;
font-size: 14px;
}
.notification-dropdown-item-info {
display: flex;
flex-direction: column;
}
.notification-dropdown-item-name {
font-size: 11px;
color: var(--dark-color);
margin-bottom: 2px;
}
.notification-dropdown-item-time {
font-size: 10px;
color: #94a3b8;
}
/* Cart Dropdown */
.cart-dropdown {
position: absolute;
top: 100%;
right: 0;
background-color: var(--white);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
width: 320px;
max-height: 400px;
overflow-y: auto;
z-index: 1000;
display: none;
}
.cart-dropdown.show {
display: block;
}
.cart-dropdown-header {
padding: 12px 15px;
border-bottom: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-dropdown-title {
font-size: 14px;
font-weight: 700;
}
.cart-dropdown-clear {
font-size: 12px;
color: var(--primary-color);
cursor: pointer;
}
.cart-dropdown-body {
padding: 0;
}
.cart-dropdown-item {
padding: 12px 15px;
border-bottom: 1px solid #f1f5f9;
}
.cart-dropdown-item:last-child {
border-bottom: none;
}
.cart-dropdown-item-info {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.cart-dropdown-item-name {
font-size: 14px;
font-weight: 500;
}
.cart-dropdown-item-price {
font-size: 14px;
font-weight: 700;
color: var(--primary-color);
}
.cart-dropdown-item-quantity {
font-size: 12px;
color: #64748b;
}
.cart-dropdown-footer {
padding: 12px 15px;
border-top: 1px solid #f1f5f9;
}
.cart-dropdown-summary {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.cart-dropdown-total {
font-size: 16px;
font-weight: 700;
color: var(--primary-color);
}
/* Receipt Modal - Alfamart Style */
.receipt-container {
background-color: #ffffff;
border: 1px solid #000000;
border-radius: 0;
padding: 15px;
max-width: 300px;
margin: 0 auto;
font-family: 'Courier New', monospace;
color: #000000;
box-shadow: none;
position: relative;
overflow: hidden;
}
.receipt-header {
text-align: center;
margin-bottom: 15px;
border-bottom: 1px dashed #000000;
padding-bottom: 10px;
}
.receipt-logo {
width: 60px;
height: 60px;
margin: 0 auto 10px;
border-radius: 0;
overflow: hidden;
}
.receipt-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.receipt-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
color: #000000;
}
.receipt-subtitle {
font-size: 12px;
color: #000000;
margin-bottom: 2px;
}
.receipt-info {
margin-bottom: 15px;
font-size: 12px;
}
.receipt-row {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.receipt-items {
margin-bottom: 15px;
font-size: 12px;
}
.receipt-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.receipt-item-name {
flex: 1;
text-align: left;
}
.receipt-item-qty {
width: 30px;
text-align: right;
}
.receipt-item-price {
width: 60px;
text-align: right;
}
.receipt-total {
border-top: 1px dashed #000000;
padding-top: 10px;
margin-top: 10px;
}
.receipt-total-row {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-weight: 700;
}
.receipt-grand-total {
font-size: 14px;
font-weight: 700;
color: #000000;
}
.receipt-footer {
text-align: center;
margin-top: 15px;
padding-top: 10px;
border-top: 1px dashed #000000;
font-size: 11px;
color: #000000;
}
.receipt-actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
.receipt-download-btn {
background-color: #000000;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
}
.receipt-download-btn:hover {
background-color: #333333;
}
/* Loading Spinner */
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.spinner-border {
width: 2rem;
height: 2rem;
}
/* Product List/Grid Toggle */
.view-toggle {
display: flex;
justify-content: flex-end;
padding: 0 15px 10px;
}
.view-toggle-btn {
background: none;
border: none;
color: #64748b;
font-size: 18px;
margin-left: 10px;
cursor: pointer;
transition: color 0.2s;
}
.view-toggle-btn.active {
color: var(--primary-color);
}
/* Product List View */
.product-list {
padding: 0 15px;
}
.product-list-item {
background-color: var(--white);
border-radius: 12px;
box-shadow: var(--card-shadow);
padding: 15px;
margin-bottom: 10px;
display: flex;
align-items: center;
transition: all 0.3s ease;
position: relative;
}
.product-list-item:hover {
transform: translateY(-2px);
box-shadow: var(--card-hover-shadow);
}
.product-list-item.selected {
background-color: rgba(19, 78, 74, 0.1);
border-left: 4px solid var(--primary-color);
}
.product-list-icon {
width: 50px;
height: 50px;
border-radius: 8px;
background-color: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}
.product-list-icon i {
font-size: 24px;
color: var(--primary-color);
}
.product-list-info {
flex: 1;
}
.product-list-name {
font-size: 16px;
font-weight: 500;
margin-bottom: 4px;
}
.product-list-details {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-list-stock {
font-size: 12px;
color: #64748b;
}
.product-list-price {
font-size: 16px;
font-weight: 700;
color: var(--primary-color);
}
.product-list-quantity {
position: absolute;
top: 10px;
right: 15px;
background-color: var(--warning-color);
color: var(--white);
border-radius: 50%;
width: 28px;
height: 28px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Product Grid View */
.product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 0 15px;
}
.product-card {
background-color: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
position: relative;
}
.product-card:hover {
transform: translateY(-3px);
box-shadow: var(--card-hover-shadow);
}
.product-image {
height: 120px;
background-color: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
}
.product-image i {
font-size: 40px;
color: #cbd5e1;
}
.product-info {
padding: 10px;
}
.product-name {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-price {
font-size: 14px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 4px;
}
.product-stock {
font-size: 11px;
color: #64748b;
}
/* Other Tabs (unchanged) */
.card-container {
background-color: var(--white);
border-radius: 12px;
box-shadow: var(--card-shadow);
overflow: hidden;
margin: 0 15px 15px;
}
.card-list {
padding: 0;
margin: 0;
list-style: none;
}
.card-item {
display: flex;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #f1f5f9;
}
.card-item:last-child {
border-bottom: none;
}
.card-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
background-color: rgba(19, 78, 74, 0.1);
color: var(--primary-color);
}
.card-content {
flex: 1;
}
.card-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.card-subtitle {
font-size: 12px;
color: #64748b;
}
.card-value {
font-size: 14px;
font-weight: 700;
color: var(--dark-color);
}
.customer-actions {
display: flex;
gap: 8px;
}
.customer-action {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.customer-action:hover {
transform: scale(1.1);
}
.customer-action.whatsapp {
color: #25D366;
}
.customer-action.location {
color: #EA4335;
}
.water-stock-container {
padding: 15px;
}
.water-tank {
height: 400px;
background-color: var(--white);
border-radius: 12px;
padding: 15px;
box-shadow: var(--card-shadow);
position: relative;
overflow: hidden;
}
.tank-label {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    background: #000;
    color: #fff;
    padding: 10px;
    max-width: 80%;
    margin: auto;
    border-radius: 60% 60% 0% 0%;
}
.tank-container {
height: 230px;
background-color: #000;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.water-level {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, var(--secondary-color), var(--accent-color));
border-radius: 0 0 8px 8px;
transition: height 1s ease;
}
.water-percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: 700;
color: var(--white);
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.water-info {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.water-stat {
text-align: center;
}
.water-stat-value {
font-size: 14px;
font-weight: 700;
}
.water-stat-label {
font-size: 11px;
color: #64748b;
}
.water-stock-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 15px;
}
.water-stock-box {
background-color: var(--white);
border-radius: 8px;
padding: 12px;
box-shadow: var(--card-shadow);
text-align: center;
}
.water-stock-box-value {
font-size: 16px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 4px;
}
.water-stock-box-label {
font-size: 11px;
color: #64748b;
}
.expense-item {
display: flex;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #f1f5f9;
}
.expense-item:last-child {
border-bottom: none;
}
.expense-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
background-color: rgba(239, 68, 68, 0.1);
color: var(--danger-color);
}
.expense-info {
flex: 1;
}
.expense-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.expense-date {
font-size: 12px;
color: #64748b;
}
.expense-amount {
font-size: 14px;
font-weight: 700;
color: var(--danger-color);
}
.expense-type {
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
background-color: #f1f5f9;
margin-top: 4px;
display: inline-block;
}
.settings-container {
padding: 15px;
}
.settings-group {
background-color: var(--white);
border-radius: 12px;
margin-bottom: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
}
.settings-group-title {
font-size: 14px;
font-weight: 700;
padding: 12px 15px;
background-color: #f8fafc;
border-bottom: 1px solid #f1f5f9;
}
.settings-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.settings-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
transition: .4s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--primary-color);
}
input:checked + .toggle-slider:before {
transform: translateX(20px);
}
/* Menu Settings Styles */
.menu-settings-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #f1f5f9;
}
.menu-settings-item:last-child {
border-bottom: none;
}
.menu-settings-info {
flex: 1;
}
.menu-settings-label {
font-size: 14px;
font-weight: 500;
color: var(--dark-color);
margin-bottom: 2px;
}
.menu-settings-description {
font-size: 12px;
color: #64748b;
}
.menu-settings-controls {
display: flex;
align-items: center;
gap: 10px;
}
.menu-position-selector {
display: flex;
background-color: #f1f5f9;
border-radius: 6px;
overflow: hidden;
}
.menu-position-option {
padding: 6px 10px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.menu-position-option.active {
background-color: var(--primary-color);
color: var(--white);
}
/* Reset Settings */
.settings-action-group {
display: flex;
gap: 10px;
margin-top: 15px;
padding: 0 15px;
}
.settings-action-btn {
flex: 1;
padding: 10px;
border-radius: 8px;
text-align: center;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.settings-action-btn.reset {
background-color: rgba(239, 68, 68, 0.1);
color: var(--danger-color);
}
.settings-action-btn.reset:hover {
background-color: rgba(239, 68, 68, 0.2);
}
/* Modal Content */
.modal-content {
border-radius: 12px;
border: none;
}
.modal-header {
border-bottom: 1px solid #f1f5f9;
padding: 15px;
}
.modal-title {
font-size: 16px;
font-weight: 700;
}
.modal-body {
padding: 15px;
}
.modal-footer {
border-top: 1px solid #f1f5f9;
padding: 15px;
}
.form-control, .form-select {
border-radius: 8px;
border: 1px solid #cbd5e1;
padding: 10px 12px;
font-size: 14px;
}
.form-label {
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.btn {
border-radius: 8px;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-success {
background-color: var(--success-color);
border-color: var(--success-color);
}
.btn-danger {
background-color: var(--danger-color);
border-color: var(--danger-color);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Maps Modal */
.maps-modal-body {
padding: 0;
}
.maps-container {
width: 100%;
height: 400px;
position: relative;
}
.maps-container iframe {
width: 100%;
height: 100%;
border: none;
}
/* Debt Payment Styles */
.debt-container {
background-color: var(--white);
border-radius: 12px;
box-shadow: var(--card-shadow);
overflow: hidden;
margin: 0 15px 15px;
}
.debt-header {
background-color: var(--warning-color);
color: var(--white);
padding: 12px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.debt-title {
font-size: 16px;
font-weight: 700;
}
.debt-body {
padding: 15px;
}
.debt-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f1f5f9;
}
.debt-item:last-child {
border-bottom: none;
}
.debt-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
background-color: rgba(245, 158, 11, 0.1);
color: var(--warning-color);
}
.debt-info {
flex: 1;
}
.debt-title-text {
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.debt-date {
font-size: 12px;
color: #64748b;
}
.debt-amount {
font-size: 14px;
font-weight: 700;
color: var(--warning-color);
}
.debt-due-date {
font-size: 12px;
color: var(--danger-color);
margin-top: 4px;
}
.debt-actions {
display: flex;
gap: 8px;
}
.debt-action {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
cursor: pointer;
transition: all 0.2s;
}
.debt-action:hover {
background-color: var(--primary-color);
color: var(--white);
}
.debt-action.pay {
color: var(--success-color);
}
.debt-action.pay:hover {
background-color: var(--success-color);
color: var(--white);
}
/* Tab Navigation */
.tab-navigation {
display: flex;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 15px;
}
.tab-navigation-item {
flex: 1;
text-align: center;
padding: 12px 0;
color: #64748b;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border-bottom: 2px solid transparent;
}
.tab-navigation-item.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.tab-content-container {
display: none;
}
.tab-content-container.active {
display: block;
}
/* Animasi rotasi untuk ikon refresh */
.rotating {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}