/* frontend/css/style.css */
body { background: #f4f6f9; }
#app { max-width: 95%; margin: 0 auto; padding: 10px; }
.left-panel { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.right-panel { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.stats-card { background: #f8f9fa; border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; font-size: 0.95rem; }
.stats-card .label { font-weight: 600; }
.stats-card .value { float: right; font-weight: bold; }
.status-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-DOBAVLJEN { background: #ffc107; }
.dot-ODPRT { background: #28a745; }
.dot-PORABLJEN { background: #17a2b8; }
.dot-ODSTRANJEN { background: #007bff; }
.dot-POTECENO { background: #dc3545; }
.dot-POTEKA { background: #fd7e14; }
.table-treeview th { background: #2c3e50; color: white; position: sticky; top: 0; z-index: 10; }
.table-treeview td { vertical-align: middle; }
.table-wrap { max-height: 65vh; overflow-y: auto; }
.table-wrap table { margin-bottom: 0; width: 100%; table-layout: auto; }
.table-wrap th, .table-wrap td { white-space: nowrap; padding: 4px 8px; }
.form-section { background: #f8f9fa; border-radius: 6px; padding: 12px; margin-top: 15px; }
.form-section .form-label { font-weight: 500; font-size: 0.9rem; }
.mini-stats { background: #e9ecef; border-radius: 6px; padding: 6px 12px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.9rem; font-weight: 500; align-items: center; }
.mini-stats .stat-item { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; color: #fff; font-size: 0.85rem; }
.mini-stats .stat-item .count { font-weight: 700; margin-left: 4px; }
.stat-DOBAVLJEN { background: #ffc107; color: #000; }
.stat-ODPRT { background: #28a745; color: #fff; }
.stat-PORABLJEN { background: #17a2b8; color: #fff; }
.stat-ODSTRANJEN { background: #007bff; color: #fff; }
.stat-POTECENO { background: #dc3545; color: #fff; }
.stat-POTEKA { background: #fd7e14; color: #000; }
.stat-total { background: #6c757d; color: #fff; }
#qr-reader { width: 100%; max-width: 350px; margin: 0 auto; }
@media (max-width: 992px) { .left-panel { margin-bottom: 20px; } }

/* Supplier dropdown */
.supplier-wrapper { position: relative; }
.supplier-wrapper .form-control { padding-right: 2.5rem; }
.supplier-wrapper .dropdown-toggle-btn {
  position: absolute; right: 0; top: 0; height: 100%;
  border: none; background: transparent; padding: 0 10px;
  color: #6c757d; cursor: pointer; z-index: 5;
}
.supplier-wrapper .dropdown-toggle-btn:hover { color: #212529; }
.supplier-dropdown-list {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: white; border: 1px solid #ccc; border-top: none;
  max-height: 200px; overflow-y: auto; z-index: 1000;
  list-style: none; padding: 0; margin: 0;
  border-radius: 0 0 4px 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.supplier-dropdown-list li { padding: 6px 12px; cursor: pointer; font-size: 0.9rem; }
.supplier-dropdown-list li:hover { background: #f1f3f5; }
.supplier-dropdown-list li.active { background: #e9ecef; }
.table-active {
    background-color: #cfe2ff !important;
    border-left: 4px solid #0d6efd !important;
}
.table-treeview tbody tr:hover {
    background-color: #e9ecef;
    cursor: pointer;
}