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

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --sidebar-width: 260px;
    --header-height: 56px;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05);
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Transitions */
*, *::before, *::after { box-sizing: border-box; }
a { transition: color .15s; }
button { transition: all .15s; }

/* Print styles */
@media print {
    .sidebar, header, footer, .no-print { display: none !important; }
    .main-content { margin: 0 !important; }
    .card { box-shadow: none; border: 1px solid #e2e8f0; }
}

/* Responsive Tables */
@media (max-width: 768px) {
    table.data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hide-mobile { display: none; }
}

/* Charts */
.chart-container { position: relative; height: 250px; }
.chart-container canvas { width: 100% !important; }

/* Status badges */
.status-completed, .status-paid, .status-received, .status-active {
    background: #dcfce7; color: #166534;
}
.status-pending { background: #fef9c3; color: #854d0e; }
.status-partial { background: #ffedd5; color: #9a3412; }
.status-cancelled, .status-returned { background: #fee2e2; color: #991b1b; }
.status-draft { background: #f1f5f9; color: #475569; }

/* Loading spinner */
.spinner { width: 20px; height: 20px; border: 2px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 180px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.12); z-index: 100; overflow: hidden; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13.5px; color: #374151; text-decoration: none; border: none; background: none; width: 100%; cursor: pointer; transition: background .1s; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: #f8fafc; }
.dropdown-menu .divider { border-top: 1px solid #f1f5f9; my-1: margin: 4px 0; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid #e2e8f0; }
.tab-item { padding: 10px 16px; font-size: 14px; font-weight: 500; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.tab-item.active, .tab-item:hover { color: #2563eb; border-bottom-color: #2563eb; }

/* Search highlight */
.search-highlight { background: #fef08a; border-radius: 2px; padding: 0 1px; }

/* Number input */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { opacity: 1; }

/* Qty stepper */
.qty-stepper { display: flex; align-items: center; gap: 0; }
.qty-stepper button { width: 30px; height: 30px; background: #f1f5f9; border: 1px solid #e2e8f0; font-size: 16px; cursor: pointer; transition: background .1s; }
.qty-stepper button:hover { background: #e2e8f0; }
.qty-stepper input { width: 50px; text-align: center; border: 1px solid #e2e8f0; border-left: none; border-right: none; height: 30px; font-size: 14px; font-weight: 500; }

/* Mobile bottom nav */
@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e2e8f0; z-index: 50; padding: 4px 0; }
    .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 0; font-size: 10px; color: #64748b; text-decoration: none; }
    .mobile-nav-item.active { color: #2563eb; }
    .mobile-nav-item svg { width: 22px; height: 22px; margin-bottom: 2px; }
}